JavaScript使用reduce()数组分组时key2返回undefined如何解决？

代码错误原因 #

• reduce阶段存入Map的value结构错误：你将每一项的key3和key2作为独立元素依次推入数组，最终同一个key1对应的value会变成[key3第一项, key2第一项, key3第二项, key2第二项, ...]的扁平数组，不存在独立的key2字段
• Array.from转换阶段的解构逻辑错误：Map的每一项是[键名, 存入的value]结构，你错误地把数组结构的value直接解构为key3和key2，无法拿到正确的key2值，因此返回undefined

修复后的实现代码 #

const result = Array.from(
  sample.reduce((map, { key1, key2, key3 }) => {
    if (map.has(key1)) {
      // 已有对应分组，仅合并key3内容
      map.get(key1).key3.push(...key3);
    } else {
      // 无对应分组，初始化分组结构
      map.set(key1, { key1, key2, key3: [...key3] });
    }
    return map;
  }, new Map()),
  // 直接提取Map中存储的分组对象即可
  ([_, group]) => group
);

运行上述代码后输出结果完全符合预期，相同key1对应的所有key3项会被合并，key2保留对应相同key1的固定值。

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