如何在ReactJS中正确映射数组对象，得到目标一维数组？

问题场景 #

定义如下数组对象：

const demo = [
  {
    a: "message",
    b: "another message",
    c: [{ ab: "inner message", cd: "another inner message" }, { ab: "inner message" ,cd: "another inner message" }],
  },
];

使用嵌套map映射：

const mapping = demo.map((i) => {
  return i.c.map((j)=>{return {ab: j.ab}});
});
console.log(mapping);

期望输出一维数组：

[ {ab: "inner message"},{ab: "inner message" } ]

实际输出嵌套数组：

[ [ {ab: "inner message"},{ab: "inner message" } ] ]

原因分析 #

外层的demo.map会遍历demo中的每一个元素（此处仅1个对象），每次返回的是该对象下c数组经过内层map处理后的数组，因此最终结果是一个包含单个数组的嵌套数组。

解决方法 #

方法1：用flat()展开嵌套数组 #

在map结果后调用flat()，将深度为1的嵌套数组展开为一维数组：

const mapping = demo.map((i) => {
  return i.c.map((j) => ({ ab: j.ab }));
}).flat();
console.log(mapping);

方法2：用flatMap()一步完成映射与展开 #

flatMap()等价于先执行map再调用深度为1的flat，代码更简洁：

const mapping = demo.flatMap((i) => {
  return i.c.map((j) => ({ ab: j.ab }));
});
console.log(mapping);

方法3：先合并所有c数组再映射 #

如果demo包含多个对象，可先提取所有c数组并合并，再进行映射：

const allCItems = demo.flatMap(item => item.c);
const mapping = allCItems.map(j => ({ ab: j.ab }));
console.log(mapping);

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