当前位置:首页 > 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实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swip…

js 实现vue模板

js 实现vue模板

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

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.…

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https:/…