使用变量作为键和值创建对象

Question

我正在学习React，并遵循快速入门指南，在主题状态提升中，我发现了计算器组件。

class Calculator extends React.Component {
    constructor(props) {
      super(props);

      ...

      this.state = {scale: 'c', temperature: ''}
    }

    handleCelsiusChange(temperature) {
      this.setState({scale: 'c', temperature})
    }

    handleFahrenheitChange(temperature) {
      this.setState({scale: 'f', temperature});
    }

    render() {
      ...

      return (
        <div>
          ...
        </div>
      )
    }
  }

我的问题是关于这个句子this.setState({scale: 'c', temperature})，我期望的是this.setState({scale: 'c', temperature: temperature})。

这个temperature赋值是一种React语法糖吗？你能否解释一下为什么这样可以工作。

谢谢

- Mario

---

请注意，这与setState()无关。这是答案中所述的对象字面量的语法。 - Code-Apprentice

Answer 1

{scale: 'f', temperature}是属性值简写语法，表示{scale: 'f', temperature: temperature}。

所以，在JavaScript中，如果您想定义一个对象，其键与作为属性传递的变量具有相同的名称，则可以使用简写并仅传递键名。

请查阅此文档了解详细信息。

在使用此语法时需要注意的一件重要事情是，JS引擎会在包含作用域中查找具有相同名称的变量。

如果找到了该变量，则将该变量的值分配给属性。

如果未找到，将抛出ReferenceError。 值得注意的是，转译器不会在编译时因未找到变量而抛出错误，而是会声明一个名称为未找到变量的对象。

但是，当代码运行时，您仍将收到ReferenceError，因为该变量不存在。

- Shubham Khatri

Answer 2

这是一些JavaScript语法糖。

经常有这样的情况：需要执行以下操作：

const obj = {
    a: a,
    b: b,
    c: c
};

当你使用已有的变量构建一个对象时，你需要保持它们的变量名不变。但是你会注意到，你需要两次写出每个变量名。因此，你可以这样写：

const obj = { a, b, c };

并且它将被视为与上述代码相同。

- casieber