当前位置:首页 > 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实现乘

js实现乘

JavaScript 实现乘法运算 在 JavaScript 中实现乘法运算可以通过多种方式完成,包括基本运算符、函数封装以及高级算法(如大数乘法)。以下是几种常见方法: 使用基本乘法运算符 Jav…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

js实现滚动

js实现滚动

实现滚动效果的方法 在JavaScript中实现滚动效果可以通过多种方式完成,以下是一些常见的方法: 使用window.scrollTo() window.scrollTo()方法可以将页面滚动到指…

js图片上传实现

js图片上传实现

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API实现基础图片上传功能。HTML部分需要设置accept="image/…

js实现原理

js实现原理

JavaScript 实现原理 JavaScript 是一种解释型语言,其实现原理涉及多个核心组件和运行机制,包括引擎、运行时环境、事件循环等。 引擎与解释执行 现代 JavaScript 引擎(如…

js实现删除

js实现删除

使用 splice 方法删除数组元素 splice 方法可以删除数组中的元素,并返回被删除的元素。它接受两个参数:起始索引和要删除的元素数量。 const array = [1, 2, 3, 4…