极简三分钟ES6 - 对象扩展

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

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

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 的对象扩展像"智能工具箱",让我们写对象更省力(简写属性/方法),用对象更灵活(动态属性名),管理对象更高效(合并/精准比较)

相关推荐
文心快码BaiduComate5 小时前
AI界的“超能力”MCP,到底是个啥?
前端·后端·程序员
DarkLONGLOVE5 小时前
JS魔法中介:Proxy和Reflect为何形影不离?
前端·javascript·面试
D11_5 小时前
【React】Redux和React
前端·javascript·react.js
卿·静5 小时前
Node.js轻松生成动态二维码
前端·javascript·vscode·node.js·html5
还要啥名字5 小时前
elpis NPM包的抽离
前端
成小白5 小时前
前端实现连词搜索下拉效果
前端·javascript
卸任5 小时前
从0到1搭建react-native自动更新(OTA和APK下载)
前端·react native·react.js
OpenTiny社区5 小时前
OpenTiny NEXT 训练营实操体验 | 四步将你的 Web 应用升级为智能应用
前端·开源·ai编程
持续迷茫6 小时前
lint-staged 中 --verbose 选项的深度解析
前端·git