JavaScript中如何对对象数组排序后完成映射遍历（适配React场景）

核心避坑提示：数组原生sort方法会直接修改原数组，务必先通过浅拷贝生成新数组后再执行排序，避免原数据源被意外污染，导致组件出现不可预期的渲染异常。

各维度排序逻辑实现 #

所有排序规则都可以通过给sort方法传入自定义比较函数适配，不需要引入额外工具库：

价格维度 #

价格比较必须取price.raw字段的数值计算，不要直接对比formatted格式的字符串，否则带货币符号、不同小数位数的价格会出现排序错误：

• 价格从低到高排序：

const sortedProducts = [...products].sort((a, b) => a.price.raw - b.price.raw)

• 价格从高到低排序：

const sortedProducts = [...products].sort((a, b) => b.price.raw - a.price.raw)

时间维度 #

时间维度可灵活选择created（产品创建时间）/updated（最近修改时间）作为比较依据，两个字段都是数值型时间戳，可直接做差值比较：

• 按创建时间从早到晚排序：

const sortedProducts = [...products].sort((a, b) => a.created - b.created)

• 按最近修改时间从新到旧排序（最新改动的产品排在列表最前）：

const sortedProducts = [...products].sort((a, b) => b.updated - a.updated)

React 渲染适配注意 #

• 示例数据中存在两条id="1"的重复产品，直接用product.id作为渲染key会触发React的重复key警告，可替换为组合唯一值（比如${product.id}-${product.created}）作为key使用。
• 完整可运行的渲染逻辑参考：

// 这里替换为你需要的任意排序规则即可
const sortedProducts = [...products].sort((a, b) => a.price.raw - b.price.raw)

return (
  sortedProducts.map(product => 
    <div key={`${product.id}-${product.created}`}>
      <h1>{product.name}</h1>
      <h2>{product.price.formatted}</h2>
    </div>
  )
)

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