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

相关推荐
用户214118326360215 小时前
Qwen 3-VL 实测:从图片生代码到视频提字幕,这个多模态模型有多能打?
前端
寒山李白15 小时前
npm镜像源配置指南
前端·npm·node.js
GeniuswongAir15 小时前
Flutter实现滑动页面停留吸附
前端·javascript·flutter
颜酱16 小时前
基于Antd的SchemaForm 的表单复杂配置
前端·javascript·ant design
专注VB编程开发20年16 小时前
vb.net COM DLL 示例,实现了所有 VB6 X86 数据类型的对应
开发语言·前端·vb.net·com·vb6·activex dll
要加油哦~16 小时前
vue 构建工具如何选择 | vue-cli 和 vite的区别
前端·javascript·vue.js
李剑一17 小时前
为了免受再来一刀的痛苦,我耗时两天开发了一款《提肛助手》
前端·vue.js·rust
红尘散仙17 小时前
使用 Tauri Plugin-Store 实现 Zustand 持久化与多窗口数据同步
前端·rust·electron
沙白猿17 小时前
npm启动项目报错“无法加载文件……”
前端·npm·node.js
tyro曹仓舒17 小时前
彻底讲透as const + keyof typeof
前端·typescript