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="小强"

再看一下，此时的情况吧！

效果是不是很明显哈！

转载于:https://www.cnblogs.com/newwind/p/8920657.html

js/jq基础（日常整理记录）-2-一个简单的js方法实现集合的非引用拷贝相关推荐

日常学习记录——pycharm+tensorflow简单图像识别
日常学习记录--pycharm+tensorflow简单图像识别写在前面 1 实验代码 2 实验结果 2.1 测试集的正确率 2.2 单个预测结果 2.3 集体预测结果总结与标记写在前面使用p ...
html 点击按钮js自增,JS实现点击按钮自动增加一个单元格的方法
本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个 ...
零基础学习UI设计有哪些简单有效的方法
UI设计的普及让越来越多的人对UI有了重新的认识,很多企业对UI设计这个岗位都是非常重视的,如今很多零基础学员都想要转行做UI设计,那么针对零基础学习UI设计有哪些简单有效的方法呢?来看看下面的详细介 ...
java 缓存方法_Java实现一个简单的缓存方法
Java实现一个简单的缓存方法发布时间:2020-09-07 21:39:55 来源:脚本之家阅读:99 作者:BrightLoong 缓存是在web开发中经常用到的,将程序经常使用到或调用到的对 ...
一个简单的解决方法：word文档打不开，错误提示mso.dll模块错误。
一个简单的解决方法:word文档打不开,错误提示mso.dll模块错误. 参考文章: (1)一个简单的解决方法:word文档打不开,错误提示mso.dll模块错误. (2)https://www.cn ...
奶气萌娃的声音怎么做？一个简单的小方法，奶娃配音轻松拿捏
奶气萌娃的声音怎么做?一个简单的小方法,奶娃配音轻松拿捏平时在刷短视频的时候,经常会看到可可爱爱的短视频,配音则是奶气萌娃的声音,着实可爱,萌化人心.那么,如果我们自己也想要做这种可爱的奶气萌娃的声 ...
python可以做机器人吗_零基础如何用Python写一个简单的WeChat机器人？（内附代码）...
(bing图片) python这两年热火朝天,依托其众多类库,基于python的应用层出不穷,也大大降低了非计算机专业人员的入门门槛,WeChat机器人自然不在话下!-- 聪明的瓦肯人苦于有时候总是 ...
【Java基础】用LinkedList实现一个简单栈的功能
栈的基本功能栈的最基本功能是保障后进先出,然后在此基础上可以对在栈中的对象进行弹入弹出,此外,在弹出时,如果栈为空,则会报错,所以还需要提供获取当前栈大小的方法. 构造存储对象Student /** ...
[UE][UE5]零基础学习-学习记录1-UE5安装与基本使用方法
[UE5]学习1-UE5安装与基本使用方法写在前面 01.作者碎碎念 2.UE5安装方法 01.UE5需要的电脑配置 02.UE5安装方法 001.Epic下载 002.下载安装UE5 03.基本使 ...

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

js/jq基础（日常整理记录）-2-一个简单的js方法实现集合的非引用拷贝相关推荐

最新文章

热门文章