当前位置:首页 > JavaScript

js价格排序实现

2026-04-04 05:08:49JavaScript

数组排序(升序/降序)

使用 Array.prototype.sort() 方法对数字数组进行排序。默认情况下,sort() 会将元素转换为字符串并按 Unicode 码点排序,因此需要自定义比较函数。

升序排序:

const prices = [99, 29, 159, 199, 49];
prices.sort((a, b) => a - b);
// 结果: [29, 49, 99, 159, 199]

降序排序:

prices.sort((a, b) => b - a);
// 结果: [199, 159, 99, 49, 29]

对象数组按价格排序

对包含价格属性的对象数组排序时,需在比较函数中指定属性名。

js价格排序实现

升序:

const products = [
  { name: 'Laptop', price: 999 },
  { name: 'Mouse', price: 49 },
  { name: 'Keyboard', price: 79 }
];
products.sort((a, b) => a.price - b.price);

降序:

products.sort((a, b) => b.price - a.price);

处理浮点数精度

当价格包含小数时,直接相减可能导致精度问题。建议使用 toFixed() 转换后再比较:

js价格排序实现

const floatPrices = [10.99, 2.50, 5.01];
floatPrices.sort((a, b) => parseFloat(a.toFixed(2)) - parseFloat(b.toFixed(2)));

带货币符号的字符串排序

若价格为字符串形式(如 "$29.99"),需先提取数值部分:

const currencyPrices = ["$29.99", "$9.99", "$199.99"];
currencyPrices.sort((a, b) => 
  parseFloat(a.replace(/[^0-9.]/g, '')) - 
  parseFloat(b.replace(/[^0-9.]/g, ''))
);

多条件排序

当价格相同时,可添加次要排序条件(如按名称字母序):

products.sort((a, b) => {
  if (a.price === b.price) {
    return a.name.localeCompare(b.name);
  }
  return a.price - b.price;
});

性能优化

对大规模数据排序时,考虑使用 TypedArray 提高性能:

const largeArray = new Float64Array([99.5, 23.1, 42.8]);
largeArray.sort((a, b) => a - b);

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

相关文章

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js实现轮播

js实现轮播

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

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现视口

js实现视口

js实现视口检测的方法 使用JavaScript检测元素是否进入视口(viewport)可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法: Int…