Js实现深克隆和浅克隆的方法!

深克隆和浅克隆的定义

浅克隆定义:

直接将存储在栈中的值赋值给对应变量,如果是基本数据类型,则直接赋值对应的值,如果是引用类型,则赋值的是地址。

浅克隆代码:

function lowClone(Clone){
         let obj={};
         for(let key in Clone){
             obj[key]=Clone[key]
         }
           return obj;
      }
let a = {
            name: "jack",
            class:[1,2,3],
            love:{
                eat:"delicious food!",
                drink:"milk"
            }
        }
let res=lowClone(a)

展示结果:
在这里插入图片描述
小结:可以发现使用浅克隆,如果修改的是引用类型,则原来的对象也会修改,若修改的基本数据类型则不会影响。

深克隆定义:

把数据赋值给对应的变量,从而产生一个与源数据不相干的新数据(数据地址已变化)。深克隆是克隆对象各个层级的属性。

深克隆代码(递归思想):

function deepClone(clone){
            if(typeof clone !== 'object' || clone===null){
                return clone;
            }else if(Object.prototype.toString.call(clone)=='[object Array]'){
                let _arr=[];
                clone.map((ele)=>{
                    _arr.push(ele);
                })
                return _arr;
            }else{
                let _obj={};
                for(let key in clone){
                   _obj[key]=deepClone(clone[key])
                }
                return _obj;
            }
        }
 let a = {
            name: "jack",
            class:[1,2,3],
            love:{
                eat:"delicious food!",
                drink:"milk"
            }
        }
let b=deepClone(a);
console.log(a === b);

展示结果:
在这里插入图片描述
小结:可以发现使用深克隆,如果修改的是引用类型,则原来的对象不会修改,此时新的对象地址已经变化,不再会受影响。
注意:如果obj里有RegExp、Error对象,还需做其他的处理。

另外一种方式可以简单粗暴实现深克隆

var b = JSON.parse(JSON.stringify(a));

使用上述方法时需要注意几点:

1、如果obj里面有时间对象,则JSON.stringify后再JSON.parse的结果,时间将只是字符串的形式。而不是时间对象

2、如果obj里有RegExp、Error对象,则序列化的结果将只得到空对象;

3、如果obj里有函数,undefined,则序列化的结果会把函数或 undefined丢失;

4、如果obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null

5、JSON.stringify()只能序列化对象的可枚举的自有属性,例如如果obj中的对象是有构造函数生成的,则使用JSON.parse(JSON.stringify(obj))深拷贝后,会丢弃对象的constructor;

6、如果对象中存在循环引用的情况也无法正确实现深拷贝;

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值