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

2018/04/23 17:44
阅读数 29

一、一个简单的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="小强"

 

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

 

 

效果是不是很明显哈!

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部