如何使用JavaScript实现产品按价格升序排序系统

要实现按价格从低到高排序产品并展示在页面上，你可以通过以下两步完成：

1. 对产品数组进行升序排序 #

JavaScript 的数组 sort() 方法支持自定义排序逻辑，针对价格升序需求，直接传入比较函数即可：

// 复制原数组避免修改原数据（可选但推荐，防止影响其他依赖原数组的逻辑）
const sortedProducts = [...products].sort((a, b) => {
  // 升序排序：价格低的产品排在前面
  return a.price - b.price;
});

逻辑说明： #

• 用扩展运算符 [...products] 复制原数组，因为 sort() 会原地修改原数组，复制后能保留原始数据的完整性
• 比较函数的返回值决定排序顺序：
  • 返回负数：a 的价格更低，a 排在 b 之前
  • 返回正数：b 的价格更低，b 排在 a 之前
  • 返回 0：两者价格相同，保持原数组中的相对顺序

2. 将排序后的产品渲染到页面 #

假设页面上有一个用于承载产品的容器（比如 <div id="product-container"></div>），可以通过以下代码生成并插入产品元素：

const productContainer = document.getElementById('product-container');

// 生成每个产品的HTML结构，拼接成完整字符串
const productHTML = sortedProducts.map(product => `
  <div class="product-item">
    <h3>${product.productName}</h3>
    <p>价格：$${product.price}</p>
  </div>
`).join('');

// 将HTML插入到容器中
productContainer.innerHTML = productHTML;

完整可运行示例 #

let products = [
  { productName: "Product1", price: 40 },
  { productName: "Product2", price: 50 },
  { productName: "Product3", price: 20 },
  { productName: "Product4", price: 10 },
  { productName: "Product5", price: 10 }
];

// 排序
const sortedProducts = [...products].sort((a, b) => a.price - b.price);

// 渲染到页面
const productContainer = document.getElementById('product-container');
if (productContainer) {
  productContainer.innerHTML = sortedProducts.map(product => `
    <div style="border: 1px solid #eee; padding: 12px; margin: 8px 0; border-radius: 4px;">
      <h4>${product.productName}</h4>
      <p style="margin: 6px 0 0; color: #666;">价格：$${product.price}</p>
    </div>
  `).join('');
}

在页面中添加容器元素即可看到效果：

<div id="product-container"></div>

内容的提问来源于stack exchange，提问作者user21104210