ES7 中对象数组的合并详解

在前端开发中，对象数组的合并是一项非常常见的操作，它可以帮助开发者简化代码，提高开发效率。在 ES7 中，我们可以使用新的方式来实现对象数组的合并操作。本文将详细介绍 ES7 中对象数组的合并操作。

一、数组合并

首先，我们来看一下常见的数组合并操作。在 ES6 中，我们可以使用 concat 方法以及扩展运算符 ... 来实现数组合并。例如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]

const arr4 = [...arr1, ...arr2];
console.log(arr4); // [1, 2, 3, 4, 5, 6]

在 ES7 中，我们可以使用新的方法 Array.prototype.includes 和扩展运算符 ... 来实现数组合并。例如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr4 = [...arr1, ...arr2, ...arr3];
console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

使用 Array.prototype.includes 方法可以避免重复合并。例如：

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const arr3 = [...arr1, ...arr2.filter(item => !arr1.includes(item))];
console.log(arr3); // [1, 2, 3, 4]

二、对象合并

接下来，我们来看一下对象合并操作。在 ES6 中，我们可以使用 Object.assign 方法来实现对象合并。例如：

const obj1 = { name: '张三', age: 18 };
const obj2 = { gender: '男', address: '北京' };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { name: '张三', age: 18, gender: '男', address: '北京' }

在 ES7 中，我们可以使用扩展运算符 ... 以及对象解构来实现对象合并。例如：

const obj1 = { name: '张三', age: 18 };
const obj2 = { gender: '男', address: '北京' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: '张三', age: 18, gender: '男', address: '北京' }

使用对象解构可以避免属性名冲突。例如：

const obj1 = { name: '张三', age: 18 };
const obj2 = { age: 19, gender: '男', address: '北京' };
const { age, ...rest } = { ...obj1, ...obj2 };
const obj3 = { age: age || obj1.age, ...rest };
console.log(obj3); // { name: '张三', age: 19, gender: '男', address: '北京' }

三、对象数组合并

最后，我们来看一下对象数组的合并操作。在 ES6 中，我们可以使用 Array.prototype.concat 方法以及 Object.assign 方法来实现对象数组的合并。例如：

// javascriptcn.com 代码示例
const arr1 = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }];
const arr2 = [{ id: 2, age: 18 }, { id: 4, age: 20 }];
const arr3 = arr1.concat(arr2).reduce((result, item) => {
  const index = result.findIndex(i => i.id === item.id);
  if (index >= 0) {
    result[index] = Object.assign({}, result[index], item);
  } else {
    result.push(item);
  }
  return result;
}, []);
console.log(arr3); // [{ id: 1, name: '张三' }, { id: 2, name: '李四', age: 18 }, { id: 4, age: 20 }]

在 ES7 中，我们可以使用扩展运算符 ... 以及数组解构、对象解构来实现对象数组的合并。例如：

// javascriptcn.com 代码示例
const arr1 = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }];
const arr2 = [{ id: 2, age: 18 }, { id: 4, age: 20 }];
const arr3 = [...arr1, ...arr2].reduce((result, { id, ...rest }) => {
  const index = result.findIndex(item => item.id === id);
  if (index >= 0) {
    result[index] = { ...result[index], ...rest };
  } else {
    result.push({ id, ...rest });
  }
  return result;
}, []);
console.log(arr3); // [{ id: 1, name: '张三' }, { id: 2, name: '李四', age: 18 }, { id: 4, age: 20 }]

使用对象解构和数组解构可以避免属性名冲突。例如：

// javascriptcn.com 代码示例
const arr1 = [{ userId: 1, userName: '张三' }, { userId: 2, userName: '李四' }];
const arr2 = [{ id: 2, age: 18 }, { id: 4, age: 20 }];
const arr3 = [...arr1, ...arr2.map(({ id, ...rest }) => ({ userId: id, ...rest }))].reduce((result, { userId, ...rest }) => {
  const index = result.findIndex(item => item.userId === userId);
  if (index >= 0) {
    result[index] = { ...result[index], ...rest };
  } else {
    result.push({ userId, ...rest });
  }
  return result;
}, []);
console.log(arr3); // [{ userId: 1, userName: '张三' }, { userId: 2, userName: '李四', age: 18 }, { userId: 4, age: 20 }]

四、总结

ES7 中，使用扩展运算符 ... 以及对象解构、数组解构可以实现更加简洁、高效的对象数组合并操作。掌握这些技巧可以帮助我们更好地应对项目中的需求，提高开发效率。同时，也要注意避免属性名冲突，提高代码质量。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6545a6a87d4982a6ebf469ec