Question

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

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);

Answer 1

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

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

是

的缩写

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

这与扩展运算符无关，如果你写的话会发生同样的事情：

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

为什么const通过扩展运算符更新属性？

1 个答案: