JavaScript 中的計算屬性名稱：方括號如何定義物件屬性？

揭開計算屬性名稱：方括號內是什麼？

在 JavaScript 領域，物件文字佔據至高無上的地位，一個奇怪的問題語法已經出現：用方括號括住屬性名稱。這種神秘的符號，被裝飾為“計算屬性名稱”，最近出現在 ES6 規範的頁面中。

在提供的範例中神秘地引入了屬性 dist 控制內部對象，其 files屬性託管奇特的語法樣本：

dist: {
    files: {
      [bpr + 'lib/Monster.min.js']: ['<%= concat.dist.dest %>']
    }
  }
}

對這個神秘的表達感到困惑，我們深入研究了計算屬性的神秘世界

揭秘計算屬性名稱

正如MDN 明確宣稱的那樣：「從ECMAScript 2015開始，物件初始值設定項語法也支援計算屬性名稱。根據計算表達式的結果動態產生屬性名稱的能力。在構造名稱無法靜態確定的物件屬性時，這種能力被證明是非常寶貴的。

闡明語法

計算屬性名稱的語法很簡單：包含確定的表達式方括號內的屬性名稱。此表達式的範圍可以從簡單的變數引用到複雜的計算：

在此範例中，屬性名稱是由 propertyName 變數的值動態產生的。

const propertyName = 'age';
const object = {
  [propertyName]: 25
};

賦予動態功能對象構造

計算屬性名稱允許建立動態對象，其中屬性名稱在執行時決定。當基於外部資料或使用者輸入來產生資料結構時，這種彈性變得特別有用：

此程式碼使用firstName和lastName屬性的串聯動態建立屬性。產生的物件將有一個名為“John Doe”的屬性，從而可以輕鬆存取全名。

const data = {
  firstName: 'John',
  lastName: 'Doe',
  [`${firstName} ${lastName}`]: 'John Doe'
};

總結

ES6 引入的計算屬性名稱，透過計算表達式啟用動態屬性名稱生成，從而提升 JavaScript 的物件建構能力。這種靈活性為建構複雜且富有表現力的基於物件的資料結構提供了多種可能性。

以上是JavaScript 中的計算屬性名稱：方括號如何定義物件屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！