如何用数组链式调用优化按指定顺序排序并添加属性的JS代码？

核心优化思路 #

• 预构建排序索引映射表，将排序时的indexOf线性查找转为对象键值对的O(1)查找，大幅降低排序阶段的时间复杂度
• 使用数组链式调用串联排序、属性注入逻辑，保持代码简洁易读
• 用扩展运算符创建新对象，避免修改原数据，保持纯函数风格

优化后代码示例 #

假设你的基础数据结构如下：

const sortOrder = ['red', 'blue', 'green'];
const colorPriceMap = { red: 10, blue: 15, green: 20 };
const sortThis = [
  { color: 'green' },
  { color: 'red' },
  { color: 'blue' }
];

优化后的链式调用实现：

// 预生成排序索引映射，提升排序性能
const orderLookup = sortOrder.reduce((acc, color, idx) => {
  acc[color] = idx;
  return acc;
}, {});

// 链式完成拷贝、排序、属性注入
const processedData = sortThis
  .slice() // 浅拷贝原数组，避免原地排序修改原数据
  .sort((a, b) => orderLookup[a.color] - orderLookup[b.color])
  .map(item => ({ ...item, price: colorPriceMap[item.color] }));

关键细节说明 #

1. 排序性能优化：
   原代码如果用sortOrder.indexOf(a.color)做排序对比，每次查找都是O(n)时间，排序整体复杂度为O(n² log n)；用orderLookup映射表后，每次对比是O(1)，排序复杂度降到O(n log n)，数据量越大优势越明显。

2. 纯函数风格：

   • slice()创建原数组的浅拷贝，避免sort的原地修改特性污染原数组
   • 扩展运算符...item解构原对象属性并添加price，生成全新对象，不会修改原数组中的元素

3. 链式调用的可读性：
   从左到右依次完成「拷贝→排序→添加属性」的逻辑，流程清晰，比拆分多个独立循环或赋值语句更紧凑优雅。

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