Day22【JS】ES6 动态计算属性名 Computed property names

在 ES6 以前，要取得物件只能用
物件.属姓名 或 物件[属姓名] 这样的写法。

其中 [] 内只允许 number 或 string，
如果放入变数，则会自动转成 string。

var attName = 'name';
var p = {
	name : '张三',
	attName : '李四'
}
console.log(p[attName]) // 张三
// 上方等同於呼叫 console.log(p["name"])

Computed property names

在 ES6 以後，则新增了「动态计算属性名」，
允许在定义物件时让变数作为属性名，
实际做法是在 key 外层包覆一个 []。

[] 可以使用表达式，
因此除了纯变数外也可进行计算、
使用样板字面值（Template literals）等。

应用范例一

直接使用

const myPropertyName = 'c'

const myObject = {
  a: 5,
  b: 10,
  [myPropertyName]: 15
} 

console.log(myObject.c) // prints 15

在 [] 内进行计算

const fieldNumber = 3

const myObject = {
  field1: 5,
  field2: 10,
  ['field' + fieldNumber]: 15
}

console.log(myObject.field3) // prints 15

使用样板字面值

const fieldNumber = 3

const myObject = {
  field1: 5,
  field2: 10,
  [`field${fieldNumber}`]: 15
}

console.log(myObject.field3) // prints 15

应用范例二

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" }