美文网首页
【js基础】深浅拷贝的缺点

【js基础】深浅拷贝的缺点

作者: SophieRabbit | 来源:发表于2020-09-02 15:02 被阅读0次

    引用类型值的赋值浅拷贝

    var arr1 = [1,2,3]

    var arr2 = arr1

    arr2[0] = -1

    console.log(arr1)  // [-1, 2, 3]

    console.log(arr2)  // [-1, 2, 3]

    Object.assign()

    对象里面第一层是基本类型进行深拷贝,对象引用类型进行浅拷贝

    var arr1 = {a:0, b: {c: 2}};

    var arr2 = Object.assign({}, arr1) 

    arr2.b.c = 1

    arr2.a = 1

    console.log(arr1);  // {a:0, b: {c: 1}};  基本类型深拷贝,引用类型进行浅拷贝

    console.log(arr2);  // {a:1, b: {c: 1}};  基本类型深拷贝,引用类型进行浅拷贝

    slice() 和 concat()

    对基本类型进行深拷贝,对引用类型进行浅拷贝,这两个方法仅适用于对不包含引用对象的一维数组的深拷贝

    var arr1 = [1,2,3];

    var arr2 = arr1.slice(0);  // 或者 var arr2 = arr1.concat();

    arr2[0] = -1;

    console.log(arr1); // [1, 2, 3]     基本类型深拷贝,引用类型进行浅拷贝

    console.log(arr2);  // [-1, 2, 3]    基本类型深拷贝,引用类型进行浅拷贝

    var arr11 = [{a: 1}, {b: 2}];

    var arr22 = arr11.slice(0);  // 或者 var arr2 = arr1.concat();

    arr22[0].a = 2

    console.log(arr11); //  [{a: 2}, {b: 2}];    基本类型深拷贝,引用类型进行浅拷贝

    console.log(arr22);  //  [{a: 2}, {b: 2}];     基本类型深拷贝,引用类型进行浅拷贝

    JSON.parse(JSON.stringfy)

    实现深拷贝原理:堆栈开辟新内存空间,实现深拷贝

    var targetObj = JSON.parse(JSON.stringify(obj))     // 就是深拷贝

    缺陷:

    如果你的对象里有函数,函数无法被拷贝下来

    无法拷贝copyObj对象原型链上的属性和方法

    实际场景可能对象里并没有函数,原型链上并没有属性和方法,大多数场景可以直接上JSON.parse(JSON.stringify(obj))

    递归

    缺陷:

    爆栈,数据的层次很深,递归就会栈溢出   https://zhuanlan.zhihu.com/p/73411916

    循环引用

    // 循环引用

    var a = {};

    a.a = a;

    clone(a) // Maximum call stack size exceeded 直接死循环

    第三方库

    lodash的cloneDeep

    本质是递归拷贝,对于数组或者对象中的属性,又会进行一个递归判断,如果该属性(数组便是index)的value是一个number,string,执行结束,交出执行权。如果是数组或者对象,又会继续执行递归

    https://blog.csdn.net/weixin_34049948/article/details/88772727

    immutable.js的深拷贝

    其内部使用了 Trie(字典树) 数据结构, Immutable.js 会把对象所有的 key 进行 hash 映射,将得到的 hash 值转化为二进制,从后向前每 5 位进行分割后再转化为 Trie 树。处理大量数据的情况下和直接深拷贝相比效率高了不少。

    https://blog.csdn.net/weixin_33965305/article/details/87958945

    proxy和immer的深拷贝

    通过拦截 set 和 get 就能达到我们想要的,当然 Object.defineProperty() 也可以。其实immer这个库就是用了这种做法来生成不可变对象的。其原理是建立一个new Map(),判断传入的参数是否被修改过。没有修改过的话就直接返回原数据并且停止这个分支的遍历,如果修改过的话就从copy中取值,然后把整个copy中的属性都执行一遍 finalize 函数。

    http://www.javanx.cn/20191217/js-deep-copy/

    参考链接: https://www.jianshu.com/p/bfe901f178f6

    相关文章

      网友评论

          本文标题:【js基础】深浅拷贝的缺点

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