当前位置:首页 > JavaScript

js价格排序实现

2026-01-30 13:28:24JavaScript

价格排序实现方法

在JavaScript中实现价格排序通常涉及对数组对象的特定属性(如price)进行排序。以下是几种常见的方法:

使用Array.prototype.sort()

对包含价格的对象数组进行升序或降序排列:

js价格排序实现

const products = [
  { name: 'Product A', price: 99 },
  { name: 'Product B', price: 199 },
  { name: 'Product C', price: 59 }
];

// 升序排序(低到高)
products.sort((a, b) => a.price - b.price);

// 降序排序(高到低)
products.sort((a, b) => b.price - a.price);

处理字符串类型的价格

如果价格是字符串格式(如"$99.99"),需先转换为数字:

js价格排序实现

const products = [
  { name: 'Product A', price: '$99.99' },
  { name: 'Product B', price: '$199.99' }
];

products.sort((a, b) => 
  parseFloat(a.price.replace(/[^0-9.-]/g, '')) - 
  parseFloat(b.price.replace(/[^0-9.-]/g, ''))
);

动态排序函数

创建可复用的排序函数,支持指定排序键和方向:

function sortByPrice(items, key = 'price', order = 'asc') {
  return items.sort((a, b) => 
    order === 'asc' ? a[key] - b[key] : b[key] - a[key]
  );
}

考虑性能的大数组排序

对于超过10万条数据时,考虑使用TypedArray优化:

// 将价格提取为Float64Array进行快速排序
const prices = Float64Array.from(products.map(p => p.price));
prices.sort();

注意事项

  • 原始数组会被修改,如需保留原数组需先拷贝:
    const sorted = [...products].sort((a,b) => a.price - b.price);
  • 处理浮点数时注意精度问题,建议使用toFixed(2)等方法统一格式

标签: 价格js
分享给朋友:

相关文章

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 或直接使用 window.location 实现页面跳转,适用于普通跳转或带参数的 URL。 // 方…

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与响应式…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…