JavaScript嵌套map返回二维数组 如何合并为一维对象数组

问题原因 #

原写法直接将两个内层map返回的数组作为元素塞入level数组，最终得到的是[NumList映射结果数组, SerList映射结果数组]的二维结构，不符合一维平铺的要求。

最优改法：使用展开运算符 #

直接用ES6的数组展开运算符...，把两个内层map返回的数组元素逐个展开到level数组中，即可得到平铺的一维结构，代码最简洁直观：

Resurs.map((item) => ({
  Cen: item.Cent,
  level: [
    // 展开NumList的映射结果
    ...item.NumList.map((numSubItem) => ({
      Kom: numSubItem.Number,
      Num: numSubItem.Kor,
    })),
    // 展开SerList的映射结果
    ...item.SerList.map((serSubItem) => ({
      Kom2: serSubItem.Ser,
    })),
  ],
}));

注：这里把内层map的参数名从item改成了numSubItem/serSubItem，是为了避免和外层的item变量重名造成变量遮蔽，降低代码歧义，保持原参数名item也可正常运行，只是可读性较差。

兼容旧环境写法：concat合并 #

如果需要兼容不支持ES6展开运算符的运行环境，可以用数组原生的concat方法实现两个映射结果数组合并，效果完全一致：

Resurs.map((item) => ({
  Cen: item.Cent,
  level: item.NumList.map((item) => ({
    Kom: item.Number,
    Num: item.Kor,
  })).concat(item.SerList.map((item) => ({
    Kom2: item.Ser,
  })))
}));

两种写法运行后，level字段都会输出预期的一维对象数组结构，没有多余的嵌套层。

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