zoukankan      html  css  js  c++  java
  • js对象的深浅拷贝

    JS数据类型可以分为(ES5,暂时不考虑ES6):

      简单数据类型:Number、String、undefined、boolean

      复杂数据类型:Object、Array

    简单的数据类型,往往是赋值操作,而复杂数据类型是引用操作。

    赋值操作我们就不讲了,主要看看引用操作把

        var arr = [1,2,3];
        var arr2 = arr;
        arr2.push(4);
        console.log(arr);//输出[1,2,3,4]

    明明是对arr2进行的操作,为什么arr也变化了呢?因为js存储对象都是存地址的,所以arr2实际存储的是:"arr在内存中的地址";

    由此我们可以明白,既然都是指向同一个内存地址,当我们改变任何一个的时候,都会改变。

    知道这个基本的特性那么我们可以试图来理解下浅复制和深复制

    首先看一段代码,我们再来讲解下概念

    复制代码
        var obj ={a:1,b:2,c:[1,2]};
        var shallowCopy = shallow(obj);
        function shallow(obj){
            var shallowObj = {};
            for(var name in obj){
                if(obj.hasOwnProperty(name)){
                    shallowObj[name] = obj[name]
                }
            }
            return shallowObj
        }
        console.log(shallowCopy);//输出的就是这个对象,我们实现了简单的浅复制;
    复制代码

    浅复制:只会将对象的各个属性进行依次复制,并不会进行递归复制,而js存储对象都是存地址的,所以浅复制会导致obj.c和shallowCopy.c 指向同一块内存地址;会导致引用。

    深复制:它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面obj和shallowCopy的c属性指向同一个对象的问题。(待会贴出深复制的代码,这是个复杂的问题)

    总结:需要注意的是,如果对象比较大,层级也比较多,深复制会带来性能上的问题。在遇到需要采用深复制的场景时,可以考虑有没有其他替代方案,在实际的引用场景中,也是浅复制更为常用。 

    我现在给出一个简单版本的深复制,可以复制对象和数组(不考虑循环引用问题,函数对象问题),如果想深入研究的话可以看下这篇文章:http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/

    在这里我们只理解思想和简单的实现,实际项目中可以考虑使用lodash(http://lodashjs.com/docs/),或者jQuery的extend的方法也同样可以

    复制代码
        function deepClone(obj){
            var newObj = obj.constructor === Array ? []:{};
            if(typeof obj !== 'object'){
                return
            }else{
                for(var i in obj){
                    if(obj.hasOwnProperty(i)){
                        newObj[i] = typeof obj[i] === 'object'?deepClone(obj[i]):obj[i];
                    }
                }
            }
            return newObj
        }
    复制代码

    最核心的思想还是采用递归的方式,不断进行,直到基本数据类型后,再复制

    方法还有很多种,譬如还有使用JSON.stringify进行序列化,JSON.parse进行反序列化,实现"偷懒版"的深复制...等等

  • 相关阅读:
    npm 操作
    vue 下拉框选中不显示的问题
    VUE项目中遇到的Bug总结
    Websocket练手
    Mysql 去重取最新的一条数据
    C# 一列数的规则如下:1、1、2、3、5、8、13..…...求第30位数是多少,用递归算法实现
    冒泡排序 升序 降序(笔试)
    Sql语句查询成绩大全(Mysql,sqlserver,oracle)常遇笔试题
    C# ,.net 对比两个List的方法 亲测
    C#当前时间加、减指定时间
  • 原文地址:https://www.cnblogs.com/airen123/p/9543602.html
Copyright © 2011-2022 走看看