动态设置对象键名的几种方法

你是否还在为对象属性名无法动态生成而烦恼？JavaScript 的“计算属性名”特性让你能在对象字面量中直接用方括号包裹变量、模板字符串或函数调用（如[key]、[${prefix}Id]、[getKeyName()]），运行时自动求值并转为字符串键名——无需拼接、无需Object.defineProperty，简洁又强大；本文深入解析语法要点、高频使用场景（变量赋键、字符串拼接、函数返回键名）及易错陷阱（如误加引号导致静态键名），助你一眼识别正确写法，写出更灵活、可维护的现代 JavaScript 代码。

在对象字面量中，可以用方括号 [] 包裹表达式来动态生成属性名，这种写法叫“计算属性名”（Computed Property Names）。

语法格式：用方括号包裹表达式

在对象字面量的键位置，直接写 [表达式]，JavaScript 会在创建对象时求值该表达式，并将其结果作为属性名。

• 表达式可以是变量、字符串拼接、函数调用、模板字符串等
• 表达式结果会被自动转为字符串（遵循 ToString 抽象操作）
• 必须使用方括号，不能加引号（否则就变成字面量字符串键了）

常见使用场景和例子

1. 使用变量作为键名

const key = 'userName';
const obj = {
  [key]: 'Alice',
  age: 30
};
// 结果：{ userName: 'Alice', age: 30 }

2. 拼接字符串生成键名

const prefix = 'user';
const id = 123;
const obj = {
  [`${prefix}Id`]: id,
  [`is${prefix}Active`]: true
};
// 结果：{ userId: 123, isUserActive: true }

3. 调用函数获取键名

function getKeyName() {
  return 'status';
}
const obj = {
  [getKeyName()]: 'online',
  name: 'Bob'
};
// 结果：{ status: 'online', name: 'Bob' }

注意事项

• 计算属性名不能出现在对象解构赋值的左侧（即不能用于解构时动态取值）
• 如果表达式结果为 undefined 或 null，会转成字符串 "undefined" 或 "null" 作为键名
• Symbol 也可以作为计算属性名，且不会被字符串化：[Symbol('id')]: 42
• 与普通字面量键共存时，计算属性名需与其他键用逗号分隔，顺序不影响执行

对比：错误写法 vs 正确写法

❌ 错误：加了引号，变成固定字符串键

const key = 'name';
const obj = { ['key']: 'Alice' }; // 键名就是字符串 'key'，不是变量值

✅ 正确：不加引号，方括号内是表达式

const key = 'name';
const obj = { [key]: 'Alice' }; // 键名是 'name'

以上就是《动态设置对象键名的几种方法》的详细内容，更多关于的资料请关注golang学习网公众号！