JavaScript如何完成深度克隆?

在react中我们有的时候会遇到这样的问题,当我们在使用一个数组数据的时候,当这个数组数据嵌套特别深时,比如树形结构数据,我们在修改了一个比较深的那一层的值时,会发现render没有重新执行,这个就是嵌套太深,我们修改的时候没有进行深拷贝,react没有监听到数据发生变化,所以这个时候就需要深拷贝。
我们看下以下代码:

const arr1 = [1,2,3,4,5];
const arr2 = [...arr1];
console.log('result',arr2);
console.log('111111',arr1 === arr2); //输出true
const arr3 = [[1,2],2,2,3,4,5];
const arr4 = [...arr3];
console.log('result',arr4);
console.log('111111',arr3[0] === arr4[0]); //输出false

我们会发现当正常的数据结构我们直接重新创建一个数组或者对象然后使用剩余运算符将之前的数据解构出来就完成了深拷贝,但是当数组或者对象里面存在嵌套的时候就不行了。所以这个时候我们就需要使用递归的方法,去完成相关嵌套内容的深拷贝。如下:

/**
* 传入一个数据,进行深拷贝,返回深拷贝后的结果
* @param value 传入参数
*/
const deepClone = (value: any) => {
  if(Array.isArray(value)){ //判断是否是数组
    let cloneArr:any = []; //定义深拷贝后的数组
    for(let i = 0; i < value.length; i++){
      cloneArr.push(deepClone(value[i])); // cloneArr[i] = deepClone(value[i]);
    }
    return cloneArr;
  }else if(value !== null && typeof value === 'object'){ //判断是否是对象
    let obj:any = {};
    for(let key in value){
      obj[key] = deepClone(value[key]);
    }
    return obj;
  }
  return value;
}
const arr1 = [[1,2],2,3];
const arr2 = deepClone(arr1);
const obj1 = {a:1,b:{a:1,b:2},c:[1,2]};
const obj2 = deepClone(obj1);
console.log('arr2--->',arr2);
console.log('result',arr1[0] === arr2[0]);
console.log('obj2--->',obj2);
console.log('result',obj2.c === obj1.c);

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值