ES6 对象扩展

对象是 JS 里的核心数据结构，ES6 把对象的写法大幅简化，这篇讲四个实用点，掌握后写对象会顺手很多:

• 属性和方法简写
• 属性名表达式
• 常用遍历方法
• 对象合并

对象简写

属性简写

当要创建的属性名和变量名同名时，可以只写一个，ES6 自动补齐：

// ES5：要写两遍 name
const name = '小明';
const obj = { name: name };

// ES6：同名直接简写
const age = 18;
const obj = { age };   // 等价于 { age: age }

实战中最常见的是「把多个变量打包进一个对象」：

// 示例
const user = '小明';
const level = 5;
const config = { user, level };   // { user: '小明', level: 5 }

方法简写

对象的方法（属性值是函数的），可以去掉 function 和冒号：

// ES5
const obj = {
  say: function () {
    console.log('hi');
  },
};

// ES6
const obj = {
  say() {
    console.log('hi');
  },
};

日常在 Vue、配置对象里写的都是这种简洁方法（前面箭头函数篇的 user.show() 例子已经用过了）。

属性名表达式

对象的属性名不仅可以是固定字符串，也可以是方括号里的表达式（变量、运算结果）：

// 示例
const key = 'color';
const obj = {
  [key]: 'red',           // 属性名是变量 key 的值
  ['size' + 'Max']: 100,  // 属性名是运算结果
};
console.log(obj.color);   // red
console.log(obj.sizeMax); // 100

常用于动态字段（比如根据用户输入做 key）。

遍历对象

// 示例
const user = { name: '小明', age: 18 };
console.log(Object.keys(user));    // ['name', 'age']
console.log(Object.values(user));  // ['小明', 18]
console.log(Object.entries(user)); // [['name', '小明'], ['age', 18]]

它们常常配合后面的解构、数组方法使用，遍历对象非常方便。

对象合并

ES6 提供了 Object.assign() 合并对象（实际项目里常用展开运算符一步完成，更直观），先认识 Object.assign。

它的格式是 Object.assign(目标对象, 源对象1, 源对象2, ...)：第一个参数是”目标对象”，后面所有对象的属性都会被复制进它，并返回这个目标对象：

// 示例
const base = { name: '小明', age: 18 };
const extra = { age: 20 };               // 后传入的会覆盖前面的同名键

// 第一个 {} 是新对象，作为"目标对象"
const result = Object.assign({}, base, extra);
console.log(result); // { name: '小明', age: 20 }

// 不传 {} 直接写 base，会把结果写进 base（修改原对象）
const r2 = Object.assign(base, extra);
console.log(r2 === base); // true，返回的就是 base 自己
console.log(base);        // { name: '小明', age: 20 }，base 被改掉了

实际项目中更常用展开运算符 { ...base, ...extra }，同样不修改原对象、更直观，详细的展开语法会在”运算符扩展”篇里介绍。