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

Question

当我们尝试 return 更改字段的对象副本时，我有一个关于在对象上使用扩展运算符的简短问题。我一直在研究与 React 和 Redux 有很多关系的 PluralSight 教程，并且我运行了解了展开运算符的用法：

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

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

Answer 2

对象不能有重复的键。如果在对象已经具有所述键时将键分配给对象，或者使用重复键编写对象初始值设定项，则该键的先前值将被覆盖：

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;

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

Quick question about ES6 spread operator on objects

javascript

spread-syntax