js赋值改变后原来的东西也改变了,js实现数组、对象深度克隆的两种办法

1,深度克隆的原理

JS中的深度克隆,指的是原对象改变了,克隆出来的新对象也不会改变,原对象与新对象是完全独立的关系。

实现深度克隆的原理得从对象是一种引用类型说起

众所周知,对象是一种引用类型,对象的地址指针存放于栈中,而对象实际的数据存放于堆中。

因此当我们简单地执行复制操作时,实际是把地址指针进行了复制操作,因此在对象的实际数据改变之后,新老对象都会受到影响。

那么如何让他不受到影响呢?

答案是利用基本数据类型的特点,基本类型在执行复制操作后,新老数值之间不会互相产生影响

所以,我们要对对象不断进行分解,直到其是基本数据类型之后,再进行复制操作。

2.实现方法

2.1 硬刚法(迭代法,适用于所有)

// 方法一 利用迭代
// 思路是:判定要克隆的对象是不是引用类型,如果是引用类型,则继续迭代,如果该项是基本类型,则直接复制。
function deepClone(obj){
    let newObj=Array.isArray(obj)?[]:{}

    if(obj&&typeof obj ==="object"){
        for(let key in obj){
            if(obj.hasOwnProperty(key)){
                newObj[key]=(obj && typeof obj[key]==='object')?deepClone(obj[key]):obj[key];
            }
        }
    }
    return newObj
}

let a=[{c:1},2,3,4],
b=deepClone(a);
a[0]={c:2};
console.log(a,b);

2.2 投机取巧法(Json方法,适用于部分)

//方法2  利用JSON对象的方法
//主要是利用JSON.stringify和JSON.parse,这种办法只能实现纯数据的克隆,如果存在function则会直接忽略,不会进行复制操作

function deepClone2(obj){
    return JSON.parse(JSON.stringify(obj))
}

let a1={a: 1, b: function() {}}
b1=deepClone2(a1);
console.log(a1,b1);

JS在赋值时,原始类型(比如字符串)是复制值,引用类型(比如关联数组)是复制引用。
引用类型的赋值相当于地址拷贝,赋值前后占用的是同一段地址,本质上是一个东西。
解决方案:

  let a = {"a":"js", "b":"node"};
  let b = JSON.parse(JSON.stringify(a)); //将a转成字符串后再赋值
let c =JSON.parse(jsonstr); //可以将json字符串转换成json对象 

参考链接:https://www.jianshu.com/p/c097fab70609

参考链接:https://www.cnblogs.com/gemeiyi/p/11045640.html

参考链接:https://www.cnblogs.com/60late/p/9626336.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值