JavaScript中的深拷贝、浅拷贝

JS 中的浅拷贝与深拷贝,只是针对复杂数据类型(Object,Array)的复制问题。浅拷贝与深拷贝都可以实现在已有对象上复制新的出来。对象的实例是存储在堆内存中然后通过一个引用值去操作对象,也就是说,浅拷贝和深拷贝的区别也就是:拷贝引用和拷贝实例。

先来一张灵魂画手的大作,手动狗头,

在这里插入图片描述
传错图了,留着吧,再次手动狗头,

在这里插入图片描述
我理解这块儿的时候,画了一张草图,也许不准确哦,留着以后参考。

浅拷贝

浅拷贝之所以被称为浅拷贝,是因为对象只会被克隆最外部的一层,至于更深层的对象,则依然是通过引用指向同一块堆内存。

var a = {c:1};
var b = a;
console.log(a === b); // 输出true。
a.c = 2;
console.log(b.c); // 输出 2

浅拷贝可以使用 Object.assign 和展开运算符来实现,或者简单的克隆函数:

function shallowClone(o) {
  const obj = {};
  for ( let i in o) {
    obj[i] = o[i];
  }
  return obj;
}

深拷贝

深拷贝相对浅拷贝而言,如果遇到属性值为引用类型的时候,它新建一个引用类型并将对应的值复制给它,因此对象获得的一个新的引用类型而不是一个原有类型的引用。深拷贝后,两个对象内部的元素互不干扰。

常见方法

  • JSON.parse(JSON.stringify(obj))
  • jQuery中的$.extend(true, {}, obj)
  • lodash/cloneDeep和lodash/clone

深拷贝对于一些对象可以使用 JSON 的两个函数来实现,但是由于 JSON 的对象格式比 js 的对象格式更加严格,所以如果属性值里边出现函数或者RegExp、Sympol等是特殊类型的值时,会转换失败。而且会抛弃对象的constructor,所有的构造函数会指向Object。

1.深拷贝结构化克隆实现

2.简单的深拷贝对象和数组

//深拷贝 对象和数组
var deepCopy = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== 'object'){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), //json对象转字符串,系列化
        newobj = JSON.parse(str); //还原为json对象
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === 'object' ? 
            deepCopy(obj[i]) : obj[i]; 
        }
    }
    return newobj;
};

参考链接:
https://github.com/ChhXin/one-day-in-the-future/issues/7

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逸尘️

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值