当前位置：首页 > JavaScript

js价格排序实现

2026-03-01 04:32:57JavaScript

实现价格排序的方法

在JavaScript中实现价格排序可以通过多种方式完成，具体取决于数据结构和需求。以下是几种常见的实现方法：

数组排序

对于简单的数字数组，可以使用sort方法进行升序或降序排列：

js价格排序实现

const prices = [99, 29, 159, 39, 79];
// 升序排序
prices.sort((a, b) => a - b);
// 降序排序
prices.sort((a, b) => b - a);

对象数组排序

当处理包含价格属性的对象数组时，可通过比较对象的特定属性进行排序：

js价格排序实现

const products = [
  { name: '商品A', price: 99 },
  { name: '商品B', price: 29 },
  { name: '商品C', price: 159 }
];
// 按价格升序
products.sort((a, b) => a.price - b.price);
// 按价格降序
products.sort((a, b) => b.price - a.price);

处理字符串形式的数字

如果价格以字符串形式存储（如"$29.99"），需要先提取数值部分：

const products = [
  { name: '商品A', price: "$99.00" },
  { name: '商品B', price: "$29.99" }
];
products.sort((a, b) => 
  parseFloat(a.price.replace(/[^0-9.]/g, '')) - 
  parseFloat(b.price.replace(/[^0-9.]/g, ''))
);

表格动态排序

在网页表格中实现点击表头排序的功能：

function sortTable(columnIndex) {
  const table = document.getElementById('product-table');
  const rows = Array.from(table.rows).slice(1); // 跳过表头
  const isAsc = table.rows[0].cells[columnIndex].classList.toggle('asc');

  rows.sort((a, b) => {
    const valA = parseFloat(a.cells[columnIndex].textContent);
    const valB = parseFloat(b.cells[columnIndex].textContent);
    return isAsc ? valA - valB : valB - valA;
  });

  rows.forEach(row => table.tBodies[0].appendChild(row));
}