如何在 JavaScript 中使用計算屬性名稱

計算屬性名稱功能是在 ECMAScript 2015(ES6) 中引入的，它允許您以 JavaScript 對象文字表示法動態計算對象屬性的名稱。

JavaScript 對像只是稱為屬性的鍵值對的集合。屬性的鍵是字符串或符號（也稱為屬性名），值可以是任何東西。

在計算屬性名稱之前，如果要創建具有動態屬性名稱的對象，則必須先創建對象，然後使用括號表示法將該屬性分配給值：

const key = 'name';
const value = 'Atta';

const user = {};
user[key] = value;

console.log(user.name); // Atta

但是，ES6 計算屬性名稱功能允許您將表達式作為屬性名稱分配給對象文字符號中的對象。無需先創建對象。

上面的代碼現在可以改寫如下：

const key = 'name';
const value = 'Atta';

const user = {
    [key]: value
};

console.log(user.name); // Atta

key 可以是任何表達式，只要它包含在括號 [] 中 ：

const key = 'name';
const value = 'Atta';

const user = {
    [key + '34']: value
};

console.log(user.name34); // Atta

最後一件事，您還可以使用模板文字（字符串插值）作為計算屬性名稱的表達式：

const key = 'name';
const value = 'Atta';

const user = {
    [`${key}34`]: value
};

console.log(user.name34); // Atta