当前位置:首页 > JavaScript

js对象展开 实现

2026-02-02 22:52:18JavaScript

对象展开语法(Spread Syntax)

对象展开语法(...)允许将一个对象的可枚举属性展开到另一个对象中,常用于合并、复制或覆盖对象属性。

基本用法

通过 ... 展开对象属性到新对象:

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

合并对象

同名属性后展开的值会覆盖先前的值:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }

浅拷贝对象

展开语法实现对象的浅拷贝:

const original = { x: 1, y: { z: 2 } };
const copy = { ...original };
copy.y.z = 3; // 修改嵌套对象会影响原对象
console.log(original.y.z); // 3

覆盖属性

展开语法可覆盖已有属性:

const defaults = { theme: 'light', fontSize: 16 };
const userSettings = { theme: 'dark' };
const finalSettings = { ...defaults, ...userSettings }; // { theme: 'dark', fontSize: 16 }

动态添加属性

结合计算属性名动态添加属性:

const key = 'dynamicProp';
const obj = { ...{ [key]: 'value' } }; // { dynamicProp: 'value' }

注意事项

  • 仅展开对象自身的可枚举属性(不包含原型链上的属性)。
  • 嵌套对象是浅拷贝,修改嵌套属性会影响原对象。
  • 适用于 ES2018(ES9)及更高版本。

兼容性处理

如需支持旧环境,可通过 Object.assign() 替代:

js对象展开 实现

const merged = Object.assign({}, obj1, obj2);

标签: 对象js
分享给朋友:

相关文章

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与响应式…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现求导

js实现求导

实现数值求导的方法 在JavaScript中实现求导通常采用数值方法,因为JavaScript不是符号计算语言。以下是常见的数值微分方法: 中心差分法 中心差分法提供较高精度的导数近似: func…