如何从对象数组中提取sa数组元素生成单一合并数组

我有如下对象数组：

pa: [{ 
  id: 1,
  sa: [ 1, 2, 3 ]
}, {
  id: 2,
  sa: [ 1, 2, 3 ]
}, {
  id: 3,
}]

部分对象包含sa数组，部分没有。我希望创建一个新数组，把所有sa数组里的数字合并成一个单一数组。

我尝试了以下代码，但得到的是多个数组的嵌套结构：

for (let i = 0; i < pa.length; i++) {
  if (pa[i].sa!== undefined && pa[i]?.sa) {
    f.push(p[i]?.sa?.map(a=> a.id));
  }
}

期望最终结果：

newArray = [1,2,3,1,2,3]

问题分析 #

你写的代码有两个关键问题：

1. 使用push方法时，直接把整个sa数组作为元素推入目标数组，导致最终结果是嵌套数组；需要把sa的元素逐个添加进去。
2. 多余的map(a=>a.id)——你的sa数组里存储的是数字，不是带id属性的对象，这行代码会把每个数字转为undefined。

修正方案 #

方案1：修正原有循环逻辑

const f = [];
for (let i = 0; i < pa.length; i++) {
  const currentSa = pa[i].sa;
  // 检查sa存在且是数组
  if (currentSa && Array.isArray(currentSa)) {
    // 用扩展运算符把sa的元素逐个推入f
    f.push(...currentSa);
  }
}
// 最终f的值：[1,2,3,1,2,3]

方案2：用flatMap简化代码

flatMap会先对每个元素执行映射，再自动扁平化一层数组，非常适合这种场景：

const newArray = pa.flatMap(item => item.sa || []);

如果对象没有sa属性，就返回空数组，不会对最终结果产生影响。

方案3：用reduce合并数组

通过reduce从初始空数组开始，逐个合并符合条件的sa数组：

const newArray = pa.reduce((acc, item) => {
  if (item.sa && Array.isArray(item.sa)) {
    return acc.concat(item.sa);
  }
  return acc;
}, []);

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