ES6语法对象短表示法和计算属性

Question

我正在学习react-native。我遇到了ES6的这种语法

第一语法

this.state = {
   refreshing: false,
};

第二语法

this.state = {[refreshing]: false};

它会执行相同的任务吗？如果这些代码行相同，那么对象短符号和计算属性之间的区别是什么

Answer 1

没有。它们完全不同：

const state = {
   refreshing: false,
};
console.log(state); // { refreshing: false }

在你的第二个例子中：

const state = {[refreshing]: false};
// Error: refreshing is not defined

这是因为计算属性在可访问范围内查找名为refreshing的变量。例如：

const refreshing = "example";
const state = { [refreshing]: false };
console.log(state); // { example: false }

因此，与计算属性语法中的第一个示例相同的是：

const key = "refreshing";
const state = {[key]: false};
console.log(state); // { refreshing: false }

但是如果你提前不知道key，你只能使用它。