zoukankan      html  css  js  c++  java
  • js/jq基础(日常整理记录)-2-一个简单的js方法实现集合的非引用拷贝

    一、一个简单的js方法实现集合拷贝

      做web项目的时候,少不了和js中的数组,集合等对象接触,那么你肯定会发现,在js中存在一个怪异的现象就是数组和集合的拷贝都是地址复制,并不是简单的数据的拷贝。

    举个例子:

    //创建一个集合
    var arr1=[{name:'小明',age:'22'},{name:'小刚',age:'23'}]
    //再创建一个空集合
    var arr2=[]
    //开始拷贝集合arr1的第一个元素数据到集合arr2中
    arr2.push(arr1[0])
    //取出arr2中的数据,修改一下属性值
    arr2[0].name="小强"

    那么这个时候,集合arr1和arr2的数会发生怎么样的变化呢?

    按照正常的逻辑,我们只改变了集合arr2的数据,那么arr1中的数据肯定是不会受到影响的。但是,事实却是arr1集合中的数据,也发生了变化。

    请看下面的debugger测试截图

    从上图可以清晰看到,arr1中的数据也发生了变化,也就是说 

    //开始拷贝集合arr1的第一个元素数据到集合arr2中
    arr2.push(arr1[0])

     实际上集合arr2是把集合arr1第一个元素对象的引用(地址)拷贝过来了,这样的拷贝会导致一改全改的现象,不是我们想要的。那么如何避免这种现象呢?

    很简单,看下面的代码:

    //实现原生js-Copy方法
            function copyObj(arr){
                var obj=arr instanceof Array?[]:{};
                for(var item in arr){
                    if(typeof arr[item]=== "object"){
                        obj[item]=copyObj(arr[item]);
                    }else{
                        obj[item]=arr[item];
                    }
                }
                return obj;
            }

    使用上面的copy()方法再试试看:

    //创建一个集合
    var arr1=[{name:'小明',age:'22'},{name:'小刚',age:'23'}]
    //再创建一个空集合
    var arr2=[]
    //开始拷贝集合arr1的第一个元素数据到集合arr2中
    var eachData=arr1[0];
    arr2.push(copy(eachData))
    //取出arr2中的数据,修改一下属性值
    arr2[0].name="小强"

    再看一下,此时的情况吧!

    效果是不是很明显哈!

  • 相关阅读:
    html5笔记
    CGI
    php和apache的关系和作用()
    sass最佳实践
    javascript笔记——jQuery插件开发的几种方式
    关于ajax解析
    http协议详解
    【python之路6】pycharm的使用
    【每日一linux命令7】用户及用户组
    【每日一linux命令6】命令中的命令
  • 原文地址:https://www.cnblogs.com/newwind/p/8920657.html
Copyright © 2011-2022 走看看