使用Spread运算符合并对象属性

前一篇文章，我写 了《 Spread运算符的6大用法》，详细介绍了Spread运算符（...）在处理数组和其他可迭代对象方面的表现。与往常一样，我的读者也喜欢其他一些很棒的用法，您应该在评论中查看这些用法 。当然，当我发布该帖子时，我在修改Babel和React时发现了散布运算符的另一种出色用法：将多个对象的属性合并到一个对象中！

JavaScript

用大括号（{}）将要合并的所有对象包装起来：

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };

const summary = {...person, ...tools};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "gender": "Male",
  "name": "David Walsh",
}
*/

创建一个新对象，其中包含rest运算符提供的对象中的所有属性和值。还请注意，您可以提供任意数量的对象进行合并：

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/

如果发生键冲突，则最右边（最后一个）对象的值将获胜：

const person1 = { name: 'David Walsh', age: 33 };
const person2 = { name: 'David Walsh Jr.', role: 'kid' };

const merged = {...person1, ...person2}
/*
Object {
  "name": "David Walsh Jr.",
  "age": 33,
  "role": "kid",
}
*/

我喜欢使用散布运算符轻松合并对象。您可以使用它Object.assign 来完成相同的功能，但是如果您不介意描述性语法稍差一点，那么蔓延运算符会使事情变得更短！

注意：并非所有浏览器都支持此语法，但是您可以将Babel与该transform-object-rest-spread插件一起使用，以使对象能够与Spread运算符合并。