javascript - 为什么const通过传播运算符更新属性？

在代码审查中，有人指出我可以使用扩展运算符和常量来更新对象：

const props = {
  hairColor: 'brown',
};

const hairColor = 'red';
const newProps = { ...props, hairColor};

console.log(newProps); // -> hairColor now equals 'red'

问题是，这如何工作？

我了解实际传递对象的方式：

const newProps = { ...props, { hairColor: 'red' }};

但是怎么知道用值'red'更新hairColor？快速测试显示它正在使用变量名，但是如何？

const props = {
  hairColor: 'brown',
};

const colorOfHair = 'red';
const newProps = { ...props, colorOfHair};

// -> hairColor still equals 'brown'
// with new property 'colorOfHair'
console.log(newProps);

最佳答案

这是ES6 shorthand property names。在对象中写入name时，这是name: name的快捷方式。所以

const newProps = { ...props, hairColor};

的缩写

const newProps = { ...props, hairColor: hairColor};

这与散布运算符无关，如果您编写以下内容，也会发生相同的事情：

const newProps = { prop1: 1, prop2: 2, hairColor };