在尚未使用 ES6 語法前，我們在寫物件的時候只能使用物件[屬性名]或物件.屬姓名去取得屬性值，例如:

const attName = 'name';
let person = {
  name: 'Harry',
  age: 22
}

console.log(person[name]); // Harry
console.log(person.name); // Harry

而如果我們把屬性名(key)存在一個變數，然後透過物件名[變數名]去取物件的值，是無法成功的

const attName = 'name';
let person = {
  attName: 'Harry',
  age: 22
}

console.log(person[attName]); // undefined

// 這樣寫的話等同於 物件[屬性名]
console.log(person['attName']); // Harry

不過 ES6 中的 Computed property names(動態計算屬性名)解決了這個問題:

我們把attrName用中括號包起來，這就是動態計算屬性名的用法，它可以將[]內的值當成屬性名，[]內可以放變數名，可以放數學的計算式甚至是有回傳值的函式

const attName = 'name';
let person = {
  [attName]: 'Harry',
  age: 22
}

console.log(person[attName]); // Harry

應用範例:

const classMates = ["Harry", "John", "Tom", "Mary", "Jerry"];
let classMatesList = {}

classMates.forEach((name, id) => {
  classMatesList = {...classMatesList, ['Id' + ++id]: name}
})

console.log(classMatesList); // { Id1: "Harry", Id2: "John", Id3: "Tom", Id4: "Mary", Id5: "Jerry" }

Computed property names 的介紹就到這邊結束，感謝閱讀:)