极简三分钟ES6 - 对象扩展

简化对象写法：告别重复代码

属性简写 当属性名和变量名相同时，直接写变量名即可

// ES5 写法 
const name = "小明";
const user = { name: name }; // 重复写两次 name 

// ES6 简写 
const user = { name }; // 自动将变量名作为属性名 

方法简写 省略 function 关键字和冒号

// ES5 
const obj = {
  sayHello: function() { console.log(" 你好！") }
};

// ES6 
const obj = {
  sayHello() { console.log(" 你好！") } // 更简洁 
};

动态属性名：属性名也能"算"出来

用 [] 包裹表达式，动态生成属性名

const key = "age";
const obj = {
  name: "小红",
  [key]: 18,        // 属性名 = "age"
  ["geo_" + key]: "北京" // 属性名 = "geo_age"
};
console.log(obj);  // { name: "小红", age: 18, geo_age: "北京" }

适用场景：根据变量生成配置项、避免硬编码属性名

对象合并：一键拼接多个对象

Object.assign() 合并对象（浅拷贝）

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
 
// 合并到 target 对象 
Object.assign(target,  source1, source2);
console.log(target);  // { a: 1, b: 2, c: 3 }

注意：

• 同名属性会被覆盖（后面的覆盖前面的）
• 只拷贝对象自身属性（不拷贝继承属性）
  用途：配置项合并、浅拷贝对象。

更精准的值比较：Object.is()

解决 === 的两个痛点

console.log(NaN  === NaN);   // false → 实际应相等 
console.log(+0  === -0);      // true  → 实际应不等 
 
// Object.is()  更符合直觉 
console.log(Object.is(NaN,  NaN)); // true 
console.log(Object.is(+0,  -0));   // false 

适用场景：需要严格判断值是否完全相同时（如数据比对）

其他实用扩展

获取原型对象

const obj = {};
console.log(Object.getPrototypeOf(obj));  // 获取原型 

ES5 与 ES6 对象操作对比

特性	ES5	ES6 改进
属性定义	必须写完整 {x: x}	支持简写 {x}
动态属性名	无法实现	{[key]: value}
对象合并	手动遍历属性	Object.assign() 一键操作
值比较	=== 有缺陷	Object.is() 更精准

牢记

ES6 的对象扩展像"智能工具箱"，让我们写对象更省力（简写属性/方法），用对象更灵活（动态属性名），管理对象更高效（合并/精准比较）