美文网首页
JS深拷贝的实现

JS深拷贝的实现

作者: y先生_f18f | 来源:发表于2019-07-17 22:49 被阅读0次

在面试中经常问到深拷贝的实现,但由于在项目中都是用网上现成的或者依赖各种函数库完成。偶尔在回答的时候就脑袋短路了,现在有时间了就简单整理了一下。

先说一下自己用过的一些方法

  1. 通过 JSON 对象实现深拷贝
//通过js的内置对象JSON来进行数组对象的深拷贝
function deepClone(obj) {
    var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
    return objClone;
}

缺陷:它会抛弃对象的constructor,深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object;这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象,也就是说,只有可以转成JSON格式的对象才可以这样用,像function没办法转成JSON;

  1. lodash函数库实现深拷贝
lodash是一个很优秀的函数库,提供了 lodash.cloneDeep()实现深拷贝
  1. Object.assign()拷贝
当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝

上面这几种方法都能简单的实现深拷贝,但是各有各的特点,也有各方面的缺点。所以就有了下面作者自己的实现方式。

function deepClone(value,hash = new WeakMap){  // WeakMap弱引用,不要用map
    if(value == null){
        return null;
    }
    if(value instanceof RegExp){
        return new RegExp(value);
    }
    if(value instanceof Date){
        return new Date(value);
    }
    //函数不需要拷贝
    if(typeof value != 'object') return value;

    let obj = new value.constructor;  //判断是对象还是数组 并且new

    if(hash.get(value)){  //如果这个对象拷贝过了 就返回那个拷贝的结果就可以了
        return hash.get(value);
    }

    hash.set(value,obj);   //如果这个对象没有拷贝过 就添加到WeakMap里面

    for (let key in value) {  // in 会遍历当前对象上面的属性和__proto__指代的属性
        if (value.hasOwnProperty(key)) {
            // 如果值还有可能是对象 就利用递归继续拷贝
            obj[key] = deepClone(value[key],hash)
        }
    }
    return obj;
    
    //区分对象和数组 Object.prototype.tostring.call
}

let o = {name: '123'};
console.log(deepClone(o))

相关文章

  • js浅拷贝深拷贝

    js浅拷贝,深拷贝的简单实现 基础数据 浅拷贝 深拷贝

  • Javascript中的深拷贝

    JS 中深拷贝的几种实现方法 1、使用递归的方式实现深拷贝 //使用递归的方式实现数组、对象的深拷贝 functi...

  • JS 中深拷贝的几种实现方法

    JS 中深拷贝的几种实现方法 1、使用递归的方式实现深拷贝 方法二 2、通过 JSON 对象实现深拷贝 缺点 (1...

  • JS深拷贝的实现

    JS深拷贝, 即传值拷贝, 需要新建一处内存,实现拷贝,具体实现如下: //ES5深拷贝 (1)循环递归: fun...

  • js 实现深拷贝

    一般不会深拷贝函数等,所以一般用递归和JSON方法即可。 如果要实现函数等拷贝,比较完美的做法: function...

  • js实现深拷贝

    一、js数据类型 基本数据类型:String、Number、Boolean、Null、Undefined复杂数据类...

  • JS中的深拷贝与浅拷贝

    知乎:js中的深拷贝和浅拷贝? 掘金: js 深拷贝 vs 浅拷贝 前言 首先深拷贝与浅拷贝只针对 Object,...

  • 2020前端高频面试题总结(附答案)

    [ js基础题 ] 1. new的实现原理是什么? 2. 深拷贝和浅拷贝的区别是什么 深拷贝 浅拷贝 3. bin...

  • 手撕常见面试题

    DOM 事件代理 数组 对象 扁平化 去重 - unique() 拷贝 浅拷贝 深拷贝 copy()函数实现 JS...

  • iOS基础知识点(网络摘抄)

    1.父类实现深拷贝时,子类如何实现深拷贝。父类没有实现深拷贝时,子类如何实现深拷贝? 深拷贝同浅拷贝的区别:...

网友评论

      本文标题:JS深拷贝的实现

      本文链接:https://www.haomeiwen.com/subject/idjhlctx.html