美文网首页
js 实现深拷贝

js 实现深拷贝

作者: Gen_ | 来源:发表于2019-03-20 10:54 被阅读0次

    一般不会深拷贝函数等,所以一般用递归和JSON方法即可。

    如果要实现函数等拷贝,比较完美的做法:

    function deepClone(data) {

      const type = this.judgeType(data);

      let obj;

      if (type === 'array') {

    obj = [];

      } else if (type === 'object') {

    obj = {};

      } else {

    // 不再具有下一层次

    return data;

      }

      if (type === 'array') {

    // eslint-disable-next-line

    for (let i = 0, len = data.length; i < len; i++) {

      obj.push(this.deepClone(data[i]));

    }

      } else if (type === 'object') {

    // 对原型上的方法也拷贝了....

    // eslint-disable-next-line

    for (const key in data) {

      obj[key] = this.deepClone(data[key]);

    }

      }

      return obj;

    },

    function  judgeType(obj) {

    // tostring会返回对应不同的标签的构造函数

      const toString = Object.prototype.toString;

      const map = {

    '[object Boolean]': 'boolean',

    '[object Number]': 'number',

    '[object String]': 'string',

    '[object Function]': 'function',

    '[object Array]': 'array',

    '[object Date]': 'date',

    '[object RegExp]': 'regExp',

    '[object Undefined]': 'undefined',

    '[object Null]': 'null',

    '[object Object]': 'object',

      };

      if (obj instanceof Element) {

    return 'element';

      }

      return map[toString.call(obj)];

    }

    递归:

    // 递归的方法实现深拷贝,实际是深入到对象内层不为对象的属性值,然后一个接一个地开辟新的内存地址.

    var json1={"name":"鹏哥","age":18,"arr1":[1,2,3,4,5],"string":'afasfsafa',"arr2":[1,2,3,4,5],"arr3":[{"name1":"李鹏"},{"job":"前端开发"}]};

    var json2={};

    function copy(obj1,obj2){

    var obj2 = obj2 || {}; // 最初的时候给它一个初始值等于它自己或者是一个json

    for (var name in obj1) {

    if (typeof obj1[name] ===  'object') {  // 先判断一下obj1[name]是不是一个对象

    obj2[name] = (obj1[name].constructor === Array)? [] : {}, // 区分对象或者数组

    copy(obj1[name],obj2[name]) // 调用自身

    } else {

    obj2[name] = obj1[name] // 如果不是对象,直接等于即可,不会发生引用

    }

    }

    return obj2; // 然后再把复制好的对象给return出去

    }

    json2 = copy(json1,json2)

    json2.arr1.push(24)

    console.log(json1)

    console.log(json2)

    JSON:

    // JSON.parse和JSON.stringify也可以实现深拷贝,但是有一定的限制.对于函数或者内置方法或者构造函数等会出现问题

    var a = {

    a:{

    i:1,

    k:[1,2,3]

    },

    b:[{a:123}]

    }

    function deepCopy(initalObject){

    var finalObject = {}

    finalObject = JSON.parse(JSON.stringify(initalObject))

    return finalObject

    }

    var b = deepCopy(a);

    b.a.k[0]= 33

    b.b[0]['a'] = 321123

    console.log(a)

    console.log(b)

    参考链接:

    https://www.jianshu.com/p/0d7bd31ccf43    js中对象的复制,浅复制(浅拷贝)和深复制(深拷贝)

    https://www.jianshu.com/p/b084dfaad501  关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

    相关文章

      网友评论

          本文标题:js 实现深拷贝

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