创建以变量为键和值的对象

IT技术 javascript reactjs ecmascript-6
2021-05-05 20:59:02

我正在学习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 sintax 糖吗?你能解释一下为什么会这样吗?

谢谢

2个回答

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

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

查看此文档以获取详细信息

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

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

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

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

这是一些 javascript 语法糖。

执行以下操作是很常见的情况:

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

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

const obj = { a, b, c };

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