js浅拷贝和深拷贝

浅拷贝复制的是 指针。指向同一块内存 ,这样浅拷贝 原始对象或者新对象的修改都是在同一内存区修改的,所以会同步变化。

深拷贝相当于重新开辟一块内存,把原始对象的值复制后填入新的内存区,原始对象和新对象的更改是在不同内存区修改的,

所以原始对象和新对象之间不会有 任何 影响。

 

对象只如果只有一层进行深拷贝,结果是深拷贝,如果有嵌套层, 嵌套层属于浅拷贝 

arr2 = arr1.concat()                               深拷贝

arr2 = [...arr1];                                       深拷贝

arr2 = arr1.slice()                                   深拷贝

arr2 = arr1.copyWithin(target,start,end)  浅拷贝(copy结果也会修改原数组)

arr2 = arr1                                             浅拷贝

Object.assign(target, ...sources)        只有第一层深拷贝

Object.create(target)        只有第一层深拷贝

obj1 = JSON.parse(JSON.stringify( obj1))           

Object.prototype.copy = (object) =>{ return Object.defineProperties( {},Object.getOwnPropertyDescriptors(object) ); }

 

 

 

### 浅拷贝深拷贝的区别 在 JavaScript 中,浅拷贝深拷贝是用于复制对象或数组的两种不同方式。它们的主要区别在于对嵌套结构(如对象中的对象)的处理。 #### 浅拷贝 浅拷贝仅复制对象的一层属性,对于对象中包含的子对象(多级属性),它复制的是引用地址而非创建新的对象。因此,如果原对象中的某个子对象被修改,拷贝后的对象也会受到影响[^2]。 例如: ```javascript const obj = { id: 1, name: 'andy', msg: { age: 18 } }; const o = {}; Object.assign(o, obj); console.log(o); // { id: 1, name: 'andy', msg: { age: 18 } } o.msg.age = 20; console.log(obj.msg.age); // 20 ``` 上述代码中,`Object.assign()` 是一种浅拷贝方法,它复制了 `obj` 的一级属性,但 `msg` 属性是一个对象,因此 `o.msg` `obj.msg` 指向同一块内存区域[^2]。 #### 深拷贝 深拷贝则会递归地复制对象的所有层级属性,确保新对象与原对象完全独立。即使原对象发生修改,也不会影响到深拷贝后的对象。然而,深拷贝通常比浅拷贝更复杂且耗时,特别是在处理复杂的嵌套结构时[^3]。 实现深拷贝的方法之一是使用 jQuery 的 `extend` 方法,并传入 `true` 参数以启用深拷贝功能: ```javascript var array = [1, 2, 3, 4]; var newArray = $.extend(true, [], array); ``` 该方法能够有效地避免因共享引用而导致的数据污染问题[^1]。 ### 实现方式对比 #### 浅拷贝实现 - **`Object.assign()`**:适用于单层对象的复制。 - **扩展运算符 `...`**:语法简洁,同样只复制第一层属性。 - **`for...in` 循环**:手动遍历对象属性并逐个赋值。 示例: ```javascript const source = { a: 1, b: { c: 2 } }; const dest = {}; for (let key in source) { dest[key] = source[key]; } dest.b.c = 3; console.log(source.b.c); // 输出 3 ``` 这表明浅拷贝无法隔离原对象与拷贝对象之间的嵌套引用关系。 #### 深拷贝实现 - **jQuery 的 `$.extend(true, {}, source)`**:支持多级嵌套对象的完整复制。 - **递归函数**:通过递归调用自身来复制每一层属性。 - **第三方库(如 Lodash 的 `_.cloneDeep()`)**:提供优化过的深拷贝算法。 - **JSON 序列化反序列化**:利用 `JSON.parse(JSON.stringify(obj))`,但这种方法不支持函数、undefined 等类型的复制。 示例: ```javascript function deepClone(obj) { if (typeof obj !== 'object' || obj === null) return obj; const copy = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { copy[key] = deepClone(obj[key]); } } return copy; } const original = { a: 1, b: { c: 2 } }; const cloned = deepClone(original); cloned.b.c = 3; console.log(original.b.c); // 输出 2 ``` 此递归实现可以确保每个层级的对象都被独立复制,从而实现真正的深拷贝效果[^3]。 ### 适用场景 - **浅拷贝**适合于不需要完全隔离对象的情况,例如配置项的默认值合并等。 - **深拷贝**适用于需要完全独立副本的情形,如状态快照保存、跨组件数据传递等,以避免副作用数据污染。 此外,在堆内存中开辟新空间为拷贝对象分配独立存储,才能真正实现深拷贝的效果,而不是简单地共享引用地址[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值