概述
在JavaScript中，对象是一种复合数据类型，它可以存储多个键值对。每个键值对由一个键和对应的值组成。如果我们要向对象添加属性，通常会使用点符号或方括号符号，但是有时候我们希望使用变量来作为属性名，这时就需要用到动态属性名。
使用点符号或方括号符号添加属性的问题
在JavaScript中，我们可以使用点符号或方括号符号向对象添加属性。
使用点符号添加属性
let obj = {};
obj.name = '张三';
obj.age = 18;
上面的代码中，我们使用点符号向对象添加了两个属性，它们的键分别是name和age。
使用方括号符号添加属性
let obj = {};
obj['name'] = '张三';
obj['age'] = 18;
上面的代码中，我们使用方括号符号向对象添加了两个属性，它们的键同样分别是name和age。
这里需要注意的是，如果键名是一个字符串，我们完全可以使用点符号或方括号符号来访问和修改属性，但是如果键名是一个变量，我们必须使用方括号符号。
let obj = {};
let name = '张三';
let age = 'age';
obj.name = '李四';
obj[age] = 18;
console.log(obj); // {name: "李四", age: 18}
上面的代码中，我们声明了两个变量name和age，并向对象添加了属性。其中，name是一个字符串，我们使用点符号添加属性时，并没有使用到name变量，而是直接写成了'李四'，因此这种情况下使用点符号和方括号符号添加属性的效果是一样的。而age是一个变量，我们只能使用方括号符号来添加它，这样它才能被解释成一个变量。
但是，如果我们使用方括号符号添加属性时，键名是一个变量，我们需要注意以下几点。
注意点
变量名称必须放在方括号中。
方括号内可以是一个变量名，也可以是一个表达式。
当使用表达式作为键名时，会先将表达式的值转换成一个字符串。
使用动态属性名添加属性
使用动态属性名，可以在运行时动态地生成属性键名，而不仅仅是在编写代码时硬编码。这样可以使代码更加灵活。
使用方括号符号添加属性
使用动态属性名，我们通常会使用方括号符号来添加属性。
let obj = {};
let name = '张三';
obj[name] = '李四';
console.log(obj); // {张三: "李四"}
上面的代码中，我们首先声明了一个变量name，并将它的值赋为'张三'。然后，我们使用方括号符号，将name作为一个变量名，添加了一个属性。注意，这里我们并没有使用到字符串'张三'，而是使用了变量name的值。
如果我们使用表达式作为属性键名，它会首先被转换为一个字符串。
let obj = {};
let name = '张三';
let age = 18;
obj[name + age] = '李四';
console.log(obj); // {张三18: "李四"}
上面的代码中，我们使用表达式name + age作为属性键名，它被转换为了字符串'张三18'，然后将这个字符串作为属性键名添加到对象中。
使用计算属性名添加属性
ES6引入了计算属性名的概念，它允许我们在对象字面量中使用方括号包裹一个表达式或一个变量名，作为当前属性名。
let name = '张三';
let age = 18;
let obj = {
[name]: '李四',
[age]: '成年'
};
console.log(obj); // {张三: "李四", 18: "成年"}
上面的代码中，我们使用计算属性名添加了两个属性，它们的键分别是'张三'和18，它们的值分别是'李四'和'成年'。
这里需要注意的是，计算属性名只能用在对象字面量里面，不能用于普通的对象属性访问。
总结
在JavaScript中，我们可以使用点符号或方括号符号向对象添加属性，如果键名是一个变量，我们必须使用方括号符号。而使用动态属性名，可以在运行时动态地生成属性键名，使用方括号符号就可以轻松实现。ES6还允许在对象字面量中使用计算属性名，进一步提高了代码的灵活性。