告别冗余！ES6 对象字面量简化实战指南

ES6 对 对象字面量（Object Literal） 进行了多项语法简化，让代码更简洁、可读性更强。以下是核心简化特性，结合示例说明：

一、属性简写（Property Shorthand）

当对象的属性名与变量名相同时，可省略 属性名: 变量名 的重复写法，直接写变量名即可。

语法对比

ES5 写法	ES6 简写
var name = '张三'; var age = 20; var obj = { name: name, age: age };	const name = '张三'; const age = 20; const obj = { name, age };

示例

// 普通变量
const id = 1;
const username = 'jack';
const user = { id, username }; // 等价于 { id: id, username: username }
console.log(user); // { id: 1, username: 'jack' }

// 函数返回值
function getPerson() {
  const name = '李四';
  const gender = '男';
  return { name, gender }; // 直接返回简写属性
}
console.log(getPerson()); // { name: '李四', gender: '男' }

二、方法简写（Method Shorthand）

对象中的方法定义可省略 function 关键字和冒号 :，直接写 方法名 () {}。

语法对比

ES5 写法	ES6 简写
var obj = { add: function(a, b) { return a + b; } };	const obj = { add(a, b) { return a + b; } };

示例

const calculator = {
  num: 10,
  add(a) { // 简写：省略 function 和 :
    return this.num + a;
  },
  multiply(a) {
    return this.num * a;
  }
};

console.log(calculator.add(5)); // 15
console.log(calculator.multiply(3)); // 30

注意

• 简写方法内部可使用 this（指向当前对象），与 ES5 普通方法一致。
• 简写方法不能用作构造函数（不能用 new 调用），否则会报错。

三、计算属性名（Computed Property Names）

允许在对象字面量中直接使用 表达式 作为属性名，用方括号 [] 包裹（ES5 需通过 obj[表达式] 动态添加）。

语法对比

ES5 写法	ES6 写法
var key = 'name'; var obj = {}; obj[key] = '张三';	const key = 'name'; const obj = { [key]: '张三' };

示例

// 1. 变量作为属性名
const prefix = 'user_';
const obj = {
  [prefix + 'id']: 1001, // 计算属性名：拼接字符串
  [prefix + 'name']: 'Alice'
};
console.log(obj); // { user_id: 1001, user_name: 'Alice' }

// 2. 表达式作为属性名
const obj2 = {
  [1 + 2]: '3', // 数字表达式
  ['a' + 'bc']: 'abc', // 字符串表达式
  [Symbol('key')]: 'symbol 值' // Symbol 作为属性名
};
console.log(obj2[3]); // '3'
console.log(obj2.abc); // 'abc'

// 3. 函数返回值作为属性名
function getKey() {
  return 'dynamicKey';
}
const obj3 = {
  [getKey()]: '动态属性值'
};
console.log(obj3.dynamicKey); // '动态属性值'

四、对象解构与简写结合

ES6 解构赋值可与对象字面量简写配合，进一步简化代码（如函数参数、变量赋值）。

示例 1：函数参数解构

// 接收对象参数时，直接解构属性
function printUser({ name, age }) {
  console.log(`姓名：${name}，年龄：${age}`);
}

const user = { name: '王五', age: 25 };
printUser(user); // 姓名：王五，年龄：25

示例 2：变量赋值解构

const person = { name: '赵六', gender: '女', age: 30 };
// 解构并简写变量名（变量名与属性名一致）
const { name, age } = person;
console.log(name, age); // 赵六 30

五、扩展运算符（...）拷贝对象

ES6 扩展运算符 ... 可快速拷贝对象的可枚举属性（浅拷贝），还能合并多个对象。

示例 1：浅拷贝对象

const obj = { a: 1, b: 2 };
const objCopy = { ...obj }; // 拷贝 obj 的所有属性
console.log(objCopy); // { a: 1, b: 2 }
objCopy.a = 100;
console.log(obj); // { a: 1, b: 2 }（原对象不受影响）

示例 2：合并对象（覆盖同名属性）

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 }; // 合并，obj2 覆盖 obj1 同名属性
console.log(mergedObj); // { a: 1, b: 3, c: 4 }

示例 3：合并并添加新属性

const mergedObj2 = { ...obj1, d: 5, ...obj2 };
console.log(mergedObj2); // { a: 1, b: 3, d: 5, c: 4 }

六、完整综合示例

// 变量定义
const name = '小明';
const age = 18;
const key = 'hobby';
const hobby = 'coding';

// ES6 简化对象字面量
const person = {
  // 1. 属性简写
  name,
  age,
  // 2. 计算属性名
  [key]: hobby,
  [key + '2']: 'reading',
  // 3. 方法简写
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  },
  // 4. 扩展运算符拷贝+合并
  ...{ height: 175, weight: 60 },
  // 5. 动态方法名（结合计算属性）
  [`say${key}`]() {
    console.log(`I like ${this.hobby}`);
  }
};

console.log(person);
// {
//   name: '小明',
//   age: 18,
//   hobby: 'coding',
//   hobby2: 'reading',
//   height: 175,
//   weight: 60,
//   sayHi: [Function: sayHi],
//   sayhobby: [Function: sayhobby]
// }

person.sayHi(); // Hi, I'm 小明
person.sayhobby(); // I like coding

核心总结

特性	作用	语法示例
属性简写	省略属性名与变量名重复的写法	{ name, age }
方法简写	省略 function 和 : 定义对象方法	{ add(a,b) { ... } }
计算属性名	用表达式动态定义属性名	{ [key + '1']: value }
扩展运算符拷贝 / 合并	浅拷贝对象、合并多个对象	{ ...obj1, ...obj2 }
解构结合简写	简化对象属性的提取（参数、变量赋值）	const { name, age } = obj

这些简化特性是 ES6 中最常用的语法之一，广泛应用于 React/Vue 组件 props、API 数据处理、工具函数等场景，大幅提升代码简洁性和开发效率。