美文网首页
JavaScript 实现深拷贝

JavaScript 实现深拷贝

作者: Kevin丶CK | 来源:发表于2019-04-10 16:07 被阅读0次

浅拷贝和深拷贝的区别:

基础类型两者一致,如果是引用类型,则不同。
浅复制会导致复制前后,指向同一块内存地址,复制前后相互影响;
深复制是开辟一块新的内存地址,复制前后互不影响。
举个例子,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝(同源,一动全动),如果B没变,那就是深拷贝(不同源,互不影响)。

下面介绍几种实现深拷贝的方法

(这里的拷贝仅限于简单的对象,不包含含有方法的对象,这里埋个坑,考虑一下含有方法的情况)

1.递归的方式实现深拷贝

       function deepCopy(obj) {
            let result = Array.isArray(obj) ? [] : {};
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    if (typeof obj[key] === 'object') {
                        result[key] = deepCopy(obj[key]);   //递归复制
                    } else {
                        result[key] = obj[key];
                    }
                }
            }
            return result;
        }
        let items = ['11', '22', '33', '44'];
        let itemsCopy = deepCopy(items);
        itemsCopy[0] = 'aaa';
        console.log('items--->' + items);//items--->11,22,33,44
        console.log('itemsCopy--->' + itemsCopy);//itemsCopy--->aaa,22,33,44

2.通过JSON对象实现深拷贝

       let items = ['11', '22', '33', '44'];
        let _obj = JSON.stringify(items);
        let itemsCopy = JSON.parse(_obj);
        itemsCopy[0] = 'aaa';
        console.log('items--->' + items);//items--->11,22,33,44
        console.log('itemsCopy--->' + itemsCopy);//itemsCopy--->aaa,22,33,44

3.通过Object.assign实现深拷贝

当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝

        let items = ['11', '22', '33', '44'];
        let itemsCopy = Object.assign([], items);
        itemsCopy[0] = 'aaa';
        console.log('items--->' + items);//items--->11,22,33,44
        console.log('itemsCopy--->' + itemsCopy);//itemsCopy--->aaa,22,33,44

注意:Object.assign实现深拷贝,只深复制了基本类型数据类型,不是真正意义的深复制

        let items = ['11', '22', '33', ['44','55']];
        let itemsCopy = Object.assign([], items);
        itemsCopy[3][0] = 'bbb';
        console.log(items);
        console.log(itemsCopy);

如图,拷贝的对象最后一项是数组对象,使用Object.assign拷贝,最后一项就是浅拷贝了。

Object.assign实现拷贝慎用!!!

4.其他第三方库实现的拷贝

(1)通过jQuery的extend方法实现深拷贝
(2)lodash函数库实现深拷贝

相关文章

  • Javascript实现深拷贝

    Type函数 首先我们要实现一个getType函数对元素进行类型判断: 深拷贝(DeepClone) 对于一个引用...

  • JavaScript深拷贝实现

    什么是浅拷贝,什么是深拷贝? 什么是浅拷贝关于浅拷贝的概念,我在网上看到一种说法,直接上代码。 但是我个人认为,上...

  • javascript 实现深拷贝

  • JavaScript 实现深拷贝

    浅拷贝和深拷贝的区别: 基础类型两者一致,如果是引用类型,则不同。浅复制会导致复制前后,指向同一块内存地址,复制前...

  • JavaScript实现深拷贝

  • 浅拷贝和深拷贝

    本文参考:JavaScript中的浅拷贝和深拷贝js 深拷贝 vs 浅拷贝深入剖析 JavaScript 的深复制...

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

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

  • 深入理解JavaScript中的堆与栈 、浅拷贝与深拷贝

    JavaScript中的浅拷贝与深拷贝 学了这么长时间的JavaScript想必大家对浅拷贝和深拷贝还不太熟悉吧,...

  • 深拷贝、浅拷贝

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

  • 面试题整理

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

网友评论

      本文标题:JavaScript 实现深拷贝

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