如何将对象的数组值扁平化为一维数组？解决循环仅返回最后数组的问题

你有如下对象：

const obj = {a: [1,2,3], b: [4,5,6]}

期望得到一维数组：[1, 2, 3, 4, 5, 6]，但使用以下函数仅返回最后一个数组[4, 5, 6]：

for (const property in obj) {
    var allData = []
    allData.push(...obj[property])
}

错误原因 #

问题出在你把allData的声明放在了循环内部，每次循环迭代都会重新创建一个空数组，之前累积的元素会被直接丢弃，最后自然只保留最后一次循环添加的数组元素。

解决方案 #

修复原循环代码 #

把数组声明移到循环外部，这样就能持续累积所有元素：

const obj = {a: [1,2,3], b: [4,5,6]};
// 将数组声明移至循环外，避免每次迭代重置
const allData = [];
for (const property in obj) {
    allData.push(...obj[property]);
}
console.log(allData); // 输出: [1, 2, 3, 4, 5, 6]

更简洁的实现方式 #

除了修复循环，还有两种更简洁的方法可以快速实现需求：

1. 使用Object.values() + flat()
Object.values()提取对象的所有值组成数组，再用flat()将二维数组直接扁平化：

const obj = {a: [1,2,3], b: [4,5,6]};
const allData = Object.values(obj).flat();
console.log(allData); // 输出: [1, 2, 3, 4, 5, 6]

2. 使用Array.concat()
   利用扩展运算符将对象的值数组作为参数传入concat，一次性合并所有数组：

const obj = {a: [1,2,3], b: [4,5,6]};
const allData = [].concat(...Object.values(obj));
console.log(allData); // 输出: [1, 2, 3, 4, 5, 6]

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