关于对象上ES6扩展运算符的快速提问

Question

我只想问一个简短的问题，当我们试图返回对象的副本时，在对象上使用扩展运算符，并更改字段。我一直在研究一个与React和Redux相关的PluralSight教程，并且遇到了spread操作符的用法：

let original = {name: 'Joel', favoriteFood: 'oranges', age: 26};
let happyBirthday = {...original, age: 27};

显然，这不是示例中的确切代码，但这是我有点困惑的用法。我最初的理解是，这将导致一个带有两个age键的对象，这显然不起作用。这是通过覆盖被复制的键的值来实现的吗？我可以说：

let obj = {a: 2, a: 'no actually 3', a: 'nevermind...', a: 2};

然后obj.a是2吗？这是一个非常小的澄清，我正在寻找，但我被抛出当我看到这个原因！谢谢!

Answer 1

对象不能有重复的键。如果在对象已经拥有上述键时将键分配给对象，或者使用重复的键写入对象初始化器，则该键的先验值将被覆盖：

​

const obj = {
  foo: 'foo',
  bar: 'bar',
};

obj.foo = 'new';
console.log(obj);

​

​

const obj = {
  foo: 'foo',
  bar: 'bar',
  foo: 'new',
};

console.log(obj);

​

当使用对象传播时，同样的事情正在发生。如果在对象初始化器(通过扩展或其他方式)中已经存在先前的键时添加键值对，则将覆盖先前的值。

let happyBirthday = {...original, age: 27};

非常类似于

// Create a new object with all properties of `original`:
let happyBirthday = Object.assign({}, original);
// Assign to the `age` property of the new object:
happyBirthday.age = 27;

Answer 2

let original = {name: 'Joel', favoriteFood: 'oranges', age: 26};
let happyBirthday = {...original, age: 27};

happyBirthday将是一个与original相同但具有覆盖age的对象。

因此，这将导致这样一个对象：

{name: 'Joel', favoriteFood: 'oranges', age: 27} // Notice the age