ES6 语法-Computed property names (动态计算属性名)介绍

在尚未使用 ES6 语法前，我们在写物件的时候只能使用物件[属性名]或物件.属姓名去取得属性值，例如:

const attName = 'name';let person = {  name: 'Harry',  age: 22}console.log(person[name]); // Harryconsole.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 的介绍就到这边结束，感谢阅读:)