JS中array.map()未返回单个合并数组，求排查问题

嘿，我来帮你捋捋问题出在哪～

你现在的代码之所以会输出两个独立的数组，是因为每次循环arrayVal的子元素时，都创建了一个新的result数组，然后直接打印它。相当于每次循环都输出当前子元素对应的id数组，自然会得到两个分开的结果。

要把所有id合并成单个数组，只需要把每次循环得到的id收集到同一个数组里就行，这里给你几种可行的方案：

方案1：修改现有循环逻辑 #

先在循环外部声明一个空数组，每次循环把当前子元素的id添加进去：

const arrayVal = [{ sources: { data: [{ id: 1 }] } }, { sources: { data: [{ id: 2 }] } } ];
// 在外层声明统一的结果数组
let result = [];
for (let sub of arrayVal) {
  // 用展开运算符把map得到的id元素逐个加入result
  result.push(...sub.sources.data.map(x => x.id));
}
console.log(result); // 输出: [1, 2]

方案2：用flatMap简化代码（推荐） #

数组的flatMap方法会先对每个元素执行map操作，再自动将结果扁平化一层，完美匹配你的需求：

const arrayVal = [{ sources: { data: [{ id: 1 }] } }, { sources: { data: [{ id: 2 }] } } ];
const result = arrayVal.flatMap(sub => sub.sources.data.map(x => x.id));
console.log(result); // 输出: [1, 2]

方案3：先map再扁平化 #

如果更习惯分步操作，也可以先通过map得到二维数组，再用flat()方法扁平化：

const arrayVal = [{ sources: { data: [{ id: 1 }] } }, { sources: { data: [{ id: 2 }] } } ];
const result = arrayVal.map(sub => sub.sources.data.map(x => x.id)).flat();
console.log(result); // 输出: [1, 2]

核心思路就是不要每次循环都生成独立数组，而是把所有id收集到同一个容器里，这样就能得到你想要的单个数组啦～

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