深拷贝和浅拷贝的区别?实现一个深拷贝?

本文详细介绍了JavaScript中浅拷贝和深拷贝的概念,包括它们的区别以及如何在JS中实现这两种拷贝方式。浅拷贝通过Object.assign、slice、concat及解构赋值实现,仅复制对象表面一层;深拷贝可以通过lodash的cloneDeep、jQuery.extend、JSON.parse+JSON.stringify以及递归手动实现,确保创建全新独立的对象副本。了解这些拷贝机制对于理解和处理复杂对象的复制至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

浅拷贝:

拷贝的是属性指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存,修改对象属性会影响原对象;
如果属性是基本类型,拷贝的是基本类型的值;
如果属性是引用类型,拷贝的就是内存地址;
即浅拷贝是拷贝一层,深层次的引用类型则共享内存地址;

JS中的浅拷贝:

1.Object.assign(target, ...sources);
target目标对象,接收源对象属性的对象,也是修改后的返回值。
sources源对象,包含将被合并的属性。
2.Array.prototype.slice();
3.Array.prototype.concat();
4.解构赋值
const fxArr = ["One", "Two", "Three"]
const fxArrs = [...fxArr]
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

深拷贝:

开辟一个新的栈,两个对象属性完全相同,对应不同的内存地址,修改一个对象的属性,不会改变另一个对象的属性;

JS中的深拷贝:
1._.cloneDeep()

 const _ = require('lodash');
 const obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
 };
 const obj2 = _.cloneDeep(obj1);
 console.log(obj1.b.f === obj2.b.f);// false

2.jQuery.extend()

 const $ = require('jquery');
 const obj1 = {
	    a: 1,
	    b: { f: { g: 1 } },
	    c: [1, 2, 3]
 };
 const obj2 = $.extend(true, {}, obj1);
 console.log(obj1.b.f === obj2.b.f); // false 

3.JSON.parse(JSON.stringify(obj))

const obj2=JSON.parse(JSON.stringify(obj1));

4.循环递归 手动实现

function deepClone(obj){
    if (obj===null) return obj;
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if (typeof obj !== "object") return obj;
    //  Array.isArray(obj) 用于确定是否是一个array
    let newObj = Array.isArray(obj) ? [] :{};
    for (let i in obj){
      newObj[i] =typeof obj[i] === "object" ? deepClone(obj[i]) :obj[i]
    }
    return newObj;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值