前端定義一個物件的時候，key值如何設定為數字，並抽成常量

龙陌發表於2024-04-21
前端物件

在JavaScript中，如果你想將物件的鍵值設定為常量數值，首先需要定義這些常量。然後你可以在建立物件時使用這些常量作為鍵。

例如：

// 定義常量
const KEY_ONE = 1;
const KEY_TWO = 2;
const KEY_THREE = 3;

// 使用常量作為物件的鍵
let myObject = {
  [KEY_ONE]: 'one',
  [KEY_TWO]: 'two',
  [KEY_THREE]: 'three'
};

console.log(myObject[KEY_ONE]); // 輸出 "one"
console.log(myObject[KEY_TWO]); // 輸出 "two"
console.log(myObject[KEY_THREE]); // 輸出 "three"

這裡透過計算屬性名（Computed Property Names）的方式，使用方括號 [] 來包裹常量，這樣可以動態地將常量值用作物件的鍵。這種方式下，即使常量改變，物件的結構也不會受影響，因為物件建立時已經根據當時常量的值來生成了對應的鍵。

注意！！！ 想要使用變數或者表示式的結果作為物件的鍵，必須使用方括號 [] 這種計算屬性名的方式

在JavaScript中，如果你想要使用變數或者表示式的結果作為物件的鍵，必須使用方括號 [] 這種計算屬性名的方式。直接寫在物件字面量中的鍵（如 key: value 形式）是靜態的，只能接受字串字面量或識別符號。

例如：

const key = 'name';
const obj1 = {
  name: 'John Doe' // 直接使用字串字面量作為鍵
};

const obj2 = {};
obj2[key] = 'John Doe'; // 使用變數作為鍵，需要方括號 []

console.log(obj1); // 輸出 { name: 'John Doe' }
console.log(obj2); // 輸出 { name: 'John Doe' }

對於常量數字作為鍵的情況也是一樣的原則，雖然數字可以作為物件的鍵，但如果你想動態引用這個常量值來建立鍵，則必須用方括號：

const KEY = 1;
const obj3 = {
  [KEY]: 'one' // 使用常量數字作為鍵，需用方括號 []
};

如果不用方括號 []，則無法做到動態賦值：

// 下面的程式碼會報錯，因為不能直接將數字常量用作物件字面量的鍵
const WRONG_KEY = 1;
const obj4 = {
  WRONG_KEY: 'one' // 錯誤：不能直接這樣使用數字常量
};

所以，當你希望將常量的數值作為鍵時，必須使用方括號語法 [CONSTANT] 來實現。

相關文章