浅度克隆和深度克隆

深度克隆是面试高频问题,他背后涵盖了很多js的知识点,为了强化记忆在这里总结一下

1.浅度克隆

function shallowClone(o) {
  const obj = {};
  for ( let i in o) {
    obj[i] = o[i];
  }
  return obj;
}
const oldObj = {
  a: 1,
  b: [ 'e', 'f', 'g' ],
  c: { h: { i: 2 } }
};

const newObj = shallowClone(oldObj);
console.log(newObj.c.h, oldObj.c.h); // { i: 2 } { i: 2 }
console.log(oldObj.c.h === newObj.c.h); // true

我们知道,在js中每个数据都需要一个内存空间,内存空间又被分为两种,栈内存和堆内存。栈内存遵循先进后出的原则,堆内存的访问则是从栈中获取了该对象的地址引用,然后再从堆内存中获取我们需要的数据。
在上面的代码中 oldobj虽然被克隆了但只被克隆了最外面的一层,还是与oldobj.c.h相等,说明他们依然指向同一段堆内存,也就是说如果改变了newobj.c.h,之前的oldobj也会被改变。

深度克隆

function type(target) {
    return Object.prototype.toString.call(target).slice(8, -1);
}

function clone(target) {
    var result;
    var targetType = type(target);
    if (targetType === 'Object') {
        result = {};
    } else if (targetType === 'Array') {
        result = [];
    } else {
        return target;
    }
    for (var i in target) {
        var value = target[i];
        if (type(value) === 'Object' || type(value) === 'Array') {
            result[i] = clone(value);
        } else {
            result[i] = value;
        }
    }
    return result;
}

在进行深度克隆的时候要对目标进行数据类型的检测,不同的数据类型有不同的检测方法,所以先创建一个检测数据类型的函数type(),把要检测的目标传进去,调用对象原型上的toString方法检测,使用call改变this的指向,同时截取第8位到倒数第一位,得到完整的数据类型的一个字符串,并返回。

然后就是进行深度克隆,创建深度克隆的函数clong(),定义一个结果,用于存储克隆之后的数据,接着就开始检测需要进行克隆的数据类型,如果数据类型检测出来是需要克隆一个对象,最终要返回的就是一个对象,相同的如果是要克隆一个数组,最终返回的结果就是一个数组。如果不是数组,也不是对象,那么就只能是基本数据类型或者一个函数,直接返回需要克隆的数据就行了,它不需要进行深度克隆。再遍历目标数据,将每一项单独拿出来进行判断,如果目标数据中的某一项是对象或者数组就使用递归,将这一项继续调用本函数,进行后续判断,如果是基本数据类型或者一个函数,放回目标数据的i位置即可。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值