JavaScript中合并两个同键对象数组时报错如何解决

你遇到的Invalid attempt to spread non-iterable instance报错和数组合并方法本身无关，核心原因是你当前操作的arr1或arr2并非合法的可迭代数组类型，可能是undefined、null、普通对象等非数组值。你可以先执行以下代码校验变量类型：

console.log(Array.isArray(arr1)) // 预期返回true
console.log(Array.isArray(arr2)) // 预期返回true

如果校验结果为false，先排查变量赋值逻辑，确保你拿到的是和示例一致的数组结构。

正确合并方案 #

确认两个变量都是合法数组后，以下两种原生方法都可以实现需求：

• 方法1：使用数组原生concat方法

const arr3 = arr1.concat(arr2)

• 方法2：使用扩展运算符

const arr3 = [...arr1, ...arr2]

错误方案说明 #

你之前尝试的几种方法不符合需求的原因如下：

• _.merge是Lodash提供的对象合并方法，不适用于数组拼接场景，用来处理数组会按索引覆盖元素，不会得到拼接结果
• [arr1, arr2]会生成二维数组，结构为[[arr1的元素], [arr2的元素]]，和你期望的一维数组结构不符

补充注意点 #

你给出的预期结果示例存在语法错误，对象的value属性和type属性之间缺少逗号，正确的结果结构应为：

const arr3 = [
  { label: 'one', value: 'one', type: 'arr1'},
  { label: 'two', value: 'two', type: 'arr1'}
];

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