浅显易懂的讲讲：什么是计算属性名？（JavaScriptES6的新属性）

简单介绍

计算属性名（Computed Property Names）是指在定义对象的属性时，可以使用表达式来动态计算属性的名称。这样做的好处是允许我们根据变量、函数的返回值或任何表达式来创建对象的属性名。

给一个简单的例子

计算属性名的语法是使用方括号 [ ] 将表达式包裹起来

let propName = "name";
let person = {
  [propName]: "Alice"
};

console.log(person); // 输出 { name: "Alice" }

//propName 的值是 "name"，我们使用 [propName] 作为对象 person 的属性名。
//这意味着属性名将被计算为 "name"，而属性的值则是 "Alice"。

计算属性名的用法

1.使用变量作为属性名

可以使用变量或常量的值来作为属性名：

let key = "age";
let user = {
  [key]: 25
};
console.log(user); // 输出 { age: 25 }

2.使用表达式作为属性名

可以直接在方括号中放置任何有效的 JavaScript 表达式，表达式的结果将被用作属性名：

let obj = {
  ["property" + 1]: "Value 1",
  ["property" + 2]: "Value 2"
};
console.log(obj); // 输出 { property1: "Value 1", property2: "Value 2" }

3.结合函数或计算结果使用

计算属性名可以结合函数或复杂的计算来动态生成属性名：

function getDynamicKey() {
  return "dynamicKey";
}

let dynamicObj = {
  [getDynamicKey()]: "This is a dynamic value"
};

console.log(dynamicObj); // 输出 { dynamicKey: "This is a dynamic value" }

这里函数的返回值作为了属性名的一部分

计算属性名有什么优点？

动态生成属性名：
适合在运行时动态生成对象的属性。

减少代码重复：
避免重复编写属性名，提高代码的灵活性和可维护性。

结合ES6中的其他特性：
与模板字符串、箭头函数等其他现代JavaScript特性结合使用时更加方便。

举个很简单的例子加深理解

使用一个循环来生成自增序列的属性名，并将它们添加到对象中。下面是一个使用计算属性名的例子，属性名为自增序列数，从 1 到 10：

let arr = ["rice", "house", "car", "tree", "book", "computer", "phone", "bicycle", "desk", "chair"];
let obj = {};

for (let i = 0; i < arr.length; i++) {
  obj[`property_${i + 1}`] = arr[i];
}

console.log(obj);

for 循环：遍历数组 arr，用 i 来表示数组的索引，从 0 到 arr.length - 1。

每次循环中，使用计算属性名 obj[property_${i + 1}] 动态生成属性名，其中 i + 1 表示自增的序列数，从 1 到 10。
数组 arr[i] 的值被赋给对应的属性，例如，arr[0]（“rice”）会赋给 “property_1”。

代码结果:

{
  property_1: "rice",
  property_2: "house",
  property_3: "car",
  property_4: "tree",
  property_5: "book",
  property_6: "computer",
  property_7: "phone",
  property_8: "bicycle",
  property_9: "desk",
  property_10: "chair"
}