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提前。