以变量为键和值创建对象答案

【问题标题】：Creating Object with variable as a key and value以变量为键和值创建对象
【发布时间】：2018-01-17 20:41:12
【问题描述】：

我正在学习react，我正在关注quick start guide，在主题Lifting State Up中我找到了计算器组件

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 分配的一些反应sintax 糖吗？你能解释一下为什么会这样吗？

谢谢

【问题讨论】：

请注意，这与setState() 无关。这是答案中描述的对象文字的语法。

标签： javascript reactjs ecmascript-6

【解决方案1】：

{scale: 'f', temperature} 基本上是Property value shorthand 的{scale: 'f', temperature: temperature} 语法，

所以在带有ES6/ES2015 的JavaScript 中，如果你想定义一个对象，它的键与作为属性传入的变量同名，你可以使用简写并简单地传递键名。

查看此doc了解详情

使用此语法时要注意的重要一点是，JS 引擎会在包含范围内查找具有相同名称的变量。

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

如果未找到，则抛出 ReferenceError。值得注意的是，transpilers 在编译时不会在找不到变量的情况下抛出错误，而是会用未找到的变量的名称声明一个对象。

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

【讨论】：

【解决方案2】：

这是一些 javascript 语法糖。

按照以下方式做某事是很常见的情况：

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

你正在用你已经拥有的变量构建一个对象并保持它们的相同名称。但是您会注意到您必须将每个变量名写两次。因此，您可以改为：

const obj = { a, b, c };

它的评估与上面的代码相同。

【讨论】：