JS中如何为数组元素添加对象属性及对应合并数组对象？

第一个问题：给数组中每个对象添加统一属性 #

你之前的问题出在obj1是数组而非普通对象，Object.assign会把数组的索引当作对象的键来处理，所以才会把obj2的属性当成第三个“元素”。要让数组里的每个对象都带上animal: 'dog'，我们需要遍历数组，给每个元素单独合并obj2的属性：

用Array.map()结合Object.assign就能轻松实现：

var obj1 = [{ food: 'pizza', car: 'ford'}, {food:'apple',car:'volvo'}]; 
var obj2 = { animal: 'dog' };

// 遍历每个对象，合并成新对象
var allRules = obj1.map(item => Object.assign({}, item, obj2));

console.log(allRules);
// 输出结果：
// [{ food: 'pizza', car: 'ford', animal: 'dog' }, { food: 'apple', car: 'volvo', animal: 'dog' }]

解释一下：

• map()会遍历数组中的每一个元素
• Object.assign({}, item, obj2)会创建一个新对象，先复制item的属性，再把obj2的属性加进去，这样不会修改原数组的对象

如果喜欢更简洁的ES6语法，也可以用扩展运算符：

var allRules = obj1.map(item => ({ ...item, ...obj2 }));

第二个问题：两个数组对应位置的对象合并 #

如果是两个数组，要把对应索引的对象合并到一起，同样可以用map()，利用它的第二个参数（当前元素的索引）来匹配另一个数组的对应元素：

基础实现代码：

var arr1 = [{ food: 'pizza', car: 'ford' }, { food: 'apple', car: 'volvo' } ]; 
var arr2 = [{ animal: 'dog' }, {animal:'cat'} ];

var mergedArr = arr1.map((item, index) => Object.assign({}, item, arr2[index]));

console.log(mergedArr);
// 输出结果：
// [{ food: 'pizza', car: 'ford', animal: 'dog' }, { food: 'apple', car: 'volvo', animal: 'cat' }]

额外优化：处理数组长度不一致的情况 #

如果两个数组长度不一样（比如arr1比arr2长），arr2[index]会返回undefined，这时候合并会出问题。可以加个默认值，确保即使没有对应元素也不会报错：

var mergedArr = arr1.map((item, index) => ({
  ...item,
  ...(arr2[index] || {}) // 如果arr2[index]不存在，就合并空对象
}));

这样不管两个数组长度是否一致，都能正常生成合并后的数组啦～

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