简化对象写法:告别重复代码
属性简写 当属性名和变量名相同时,直接写变量名即可
js
// ES5 写法
const name = "小明";
const user = { name: name }; // 重复写两次 name
// ES6 简写
const user = { name }; // 自动将变量名作为属性名
方法简写 省略 function
关键字和冒号
js
// ES5
const obj = {
sayHello: function() { console.log(" 你好!") }
};
// ES6
const obj = {
sayHello() { console.log(" 你好!") } // 更简洁
};
动态属性名:属性名也能"算"出来
用 []
包裹表达式,动态生成属性名
js
const key = "age";
const obj = {
name: "小红",
[key]: 18, // 属性名 = "age"
["geo_" + key]: "北京" // 属性名 = "geo_age"
};
console.log(obj); // { name: "小红", age: 18, geo_age: "北京" }
适用场景:根据变量生成配置项、避免硬编码属性名
对象合并:一键拼接多个对象
Object.assign()
合并对象(浅拷贝)
js
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()
解决 ===
的两个痛点
js
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
适用场景:需要严格判断值是否完全相同时(如数据比对)
其他实用扩展
获取原型对象
js
const obj = {};
console.log(Object.getPrototypeOf(obj)); // 获取原型
ES5 与 ES6 对象操作对比
特性 | ES5 | ES6 改进 |
---|---|---|
属性定义 | 必须写完整 {x: x} |
支持简写 {x} |
动态属性名 | 无法实现 | {[key]: value} |
对象合并 | 手动遍历属性 | Object.assign() 一键操作 |
值比较 | === 有缺陷 |
Object.is() 更精准 |
牢记
ES6 的对象扩展像"智能工具箱",让我们写对象更省力(简写属性/方法),用对象更灵活(动态属性名),管理对象更高效(合并/精准比较)