如何根据value属性值高效拆分JavaScript数组元素？

当然有！在JavaScript里，要实现这种按value属性值分组的需求，最高效且社区广泛认可的方法就是利用Array.prototype.reduce()——它可以在一次遍历中完成分组，时间复杂度是O(n)，性能拉满。

先给你看针对你的数组的实现代码：

const mainArray = [ 
  { key: '2', value: -20 }, 
  { key: '3', value: 0 }, 
  { key: '1', value: -20 },
  { key: '4', value: 0 },
  { key: '5', value: 10 }
];

// 用reduce分组，得到以value为键的对象，值是对应元素的数组
const groupedByValue = mainArray.reduce((acc, current) => {
  // 获取当前元素的value值作为分组键
  const valueKey = current.value;
  // 如果acc里还没有这个键，就初始化一个空数组
  if (!acc[valueKey]) {
    acc[valueKey] = [];
  }
  // 把当前元素推入对应分组的数组
  acc[valueKey].push(current);
  return acc;
}, {});

console.log(groupedByValue);
// 输出结果：
// {
//   "-20": [ { key: '2', value: -20 }, { key: '1', value: -20 } ],
//   "0": [ { key: '3', value: 0 }, { key: '4', value: 0 } ],
//   "10": [ { key: '5', value: 10 } ]
// }

为什么这个方法高效？ #

因为reduce只需要遍历数组一次，每一步只做简单的存在性判断和数组push操作，没有额外嵌套循环，对于大数组来说性能表现非常稳定。

如果你想要最终结果是数组的数组（而非键值对对象），只需用Object.values()再转一层：

const groupedArrays = Object.values(groupedByValue);
console.log(groupedArrays);
// 输出：
// [
//   [ { key: '2', value: -20 }, { key: '1', value: -20 } ],
//   [ { key: '3', value: 0 }, { key: '4', value: 0 } ],
//   [ { key: '5', value: 10 } ]
// ]

另一种可选方案：使用Map #

如果你的value可能是对象等复杂类型（或者需要保留键的原始类型），ES6的Map会是更合适的选择，它支持更丰富的键类型：

const mapGrouped = mainArray.reduce((map, current) => {
  const valueKey = current.value;
  // 如果Map里没有这个键，就设置一个空数组
  if (!map.has(valueKey)) {
    map.set(valueKey, []);
  }
  map.get(valueKey).push(current);
  return map;
}, new Map());

// 转成数组的数组用Array.from(mapGrouped.values())
const groupedArraysFromMap = Array.from(mapGrouped.values());

这两种方法效率相近，都属于线性时间复杂度。如果需要用value值直接访问分组，用对象更便捷；如果键的类型特殊，用Map更稳妥。

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