JavaScript对象字面量增强语法与简写形式规范-js教程-PHP中文网

javascript对象字面量增强语法包括属性名简写、方法简写、计算属性名及与解构赋值协同使用，提升简洁性与可读性，但需注意变量已声明、this绑定、表达式有效性及undefined处理等规范。

javascript对象字面量增强语法与简写形式规范

JavaScript对象字面量的增强语法和简写形式，核心是让代码更简洁、可读性更强，同时减少冗余书写。ES6起引入的这些特性已成现代JS开发的标配，但用法有明确规范，不注意容易引发隐含问题。

属性名简写（Shorthand Property Names）

当变量名与属性名相同时，可省略冒号和重复的名称。

✅ 正确写法：

const name = 'Alice';
const age = 30;
const user = { name, age }; // 等价于 { name: name, age: age }

⚠️ 注意事项：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

仅适用于已声明的变量或参数，不能用于未定义标识符
若变量为undefined或null，属性值就是对应值，不会报错
不可与计算属性名（如 [key]）混用在同一属性中

方法简写（Shorthand Method Definitions）

对象内定义函数时，可省略 function 关键字和冒号。

✅ 正确写法：

const obj = {
  greet() {
    return 'Hello';
  },
  log(msg) {
    console.log(msg);
  }
};

⚠️ 注意事项：

简写方法默认是普通函数，this 行为遵循调用上下文规则
不能用箭头函数替代（() => {} 会丢失 this 绑定，且语法不合法）
不支持重复的方法名（严格模式下会报错）

计算属性名（Computed Property Names）

使用方括号 [] 动态生成属性名，支持表达式。

✅ 正确写法：

const prefix = 'user';
const id = 123;
const obj = {
  [prefix + 'Id']: id,
  ['data_' + Date.now()]: 'cached'
};
// → { userId: 123, data_1715829420123: 'cached' }

⚠️ 注意事项：

方括号内必须是表达式，不能是纯字符串字面量（否则应直接写键名）
可与属性简写、方法简写共存，但需分开书写，例如：{ [key]: value, method() {} }
若表达式求值为 undefined 或 null，会转为空字符串作为键名（需警惕）

解构赋值与字面量简写的协同使用

对象字面量简写常与解构配合，实现高效的数据提取与重组。

✅ 常见组合示例：

const { name, age, city } = userData;
const summary = { name, age, city }; // 提取再组装

// 或一步完成（结合解构+简写+计算属性）
const { id, status } = response;
const result = { id, [status.toLowerCase()]: true };

⚠️ 注意事项：