JavaScript 对象字面量中的计算属性名是ES6引入的重要特性，它允许开发者在定义对象时，使用方括号包裹表达式来作为对象的键名，表达式的计算结果会直接作为该属性的键，无需先创建对象再单独赋值，大幅简化了动态键名的处理流程。
计算属性名的基本语法
计算属性名的核心是在对象字面量的键名位置使用[expression]的形式，其中expression是任意可返回有效键名（字符串、Symbol或者数字）的表达式，表达式的结果会直接作为当前属性的键名。
下面是一个最基础的使用示例：
// 定义变量作为动态键名
const keyName = 'username';
// 使用计算属性名定义对象
const user = {
[keyName]: '张三',
age: 25
};
console.log(user.username); // 输出：张三
console.log(user['username']); // 输出：张三
计算属性名的常见使用场景
1. 变量作为键名
当键名存储在变量中时，直接使用计算属性名可以避免后续单独赋值的操作，代码更加简洁。
const prop = 'score';
const student = {
name: '李四',
[prop]: 95
};
console.log(student.score); // 输出：95
2. 表达式计算结果作为键名
方括号内的表达式可以是任意有效的JavaScript表达式，比如字符串拼接、函数调用等，只要表达式的返回值符合键名的要求即可。
const prefix = 'user_';
const id = 1001;
// 字符串拼接作为键名
const account = {
[prefix + id]: 'test_account',
createTime: '2024-01-01'
};
console.log(account.user_1001); // 输出：test_account
3. Symbol作为键名
计算属性名也支持Symbol类型作为键名，这是定义Symbol属性的最便捷方式。
const uniqueKey = Symbol('unique');
const obj = {
[uniqueKey]: '这是唯一的属性值',
normalKey: '普通属性'
};
console.log(obj[uniqueKey]); // 输出：这是唯一的属性值
使用注意事项
- 计算属性名的表达式会在对象创建时立即执行，计算结果作为最终的键名，不会保留表达式本身。
- 如果表达式的计算结果不是字符串、Symbol或者数字，会被自动转换为字符串，比如数字1会转换为字符串'1'。
- 同一个对象中，如果计算属性名的结果和普通键名重复，后面的属性会覆盖前面的属性。
- 计算属性名可以和普通属性混合使用，顺序没有限制，不影响最终结果。
和传统方式的对比
在使用计算属性名之前，如果需要动态设置对象键名，通常需要先创建对象，再通过方括号语法赋值：
// 传统方式
const dynamicKey = 'address';
const person = {};
person[dynamicKey] = '北京市朝阳区';
person.name = '王五';
而使用计算属性名可以直接在对象定义阶段完成所有操作，代码更加紧凑，可读性也更高：
// 使用计算属性名的方式
const dynamicKey = 'address';
const person = {
[dynamicKey]: '北京市朝阳区',
name: '王五'
};
总结
计算属性名是JavaScript对象字面量中非常实用的特性，它让动态键名的定义变得更加直观和高效，减少了冗余的代码。开发者在实际开发中，遇到需要动态生成对象键名的场景时，优先使用计算属性名可以提升代码的简洁性和可维护性。只要注意表达式的返回值类型和键名重复的问题，就可以很好地运用这个特性解决实际开发需求。
JavaScript对象字面量计算属性名动态键名修改时间：2026-06-21 03:12:17