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

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

效果是不是很明显哈!

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

  1. js new一个对象的过程,实现一个简单的new方法

    对于大部分前端开发者而言,new一个构造函数或类得到对应实例,是非常普遍的操作了.下面的例子中分别通过构造函数与class类实现了一个简单的创建实例的过程. // ES5构造函数 let Parent ...

  2. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  3. JavaScript--我发现,原来你是这样的JS(基础概念--灵魂篇,一起来学js吧)

    介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第三篇(灵魂篇介绍),有着剩下的第三章的知识内容,当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的,要看懂 ...

  4. 只是一个用EF写的一个简单的分页方法而已

    只是一个用EF写的一个简单的分页方法而已 慢慢的写吧.比如,第一步,先把所有数据查询出来吧. //第一步. public IQueryable<UserInfo> LoadPagesFor ...

  5. js/jq基础(日常整理记录)-1-纯js格式化时间

    一.纯js格式化时间 之前记录了一些,工作中发现的比较常用的使用,就记录一下. 由于很基础,就直接贴出来了,不做分析了. 改造一下Date的原型 Date.prototype.format = fun ...

  6. js/jq基础(日常整理记录)-4-一个简单的自定义tree插件

    一.一个简单的自定义tree插件 上一篇是之前自定义的table插件,这一篇也是之前同期尝试做的一个tree插件. 话不多说,先看看长什么样子哈! 现在来看确实不好看,以后在优化吧! 数据源:ajax ...

  7. 【Java基础】用LinkedList实现一个简单栈的功能

    栈的基本功能 栈的最基本功能是保障后进先出,然后在此基础上可以对在栈中的对象进行弹入弹出,此外,在弹出时,如果栈为空,则会报错,所以还需要提供获取当前栈大小的方法. 构造存储对象Student /** ...

  8. JS中的内置对象简介与简单的属性方法

    JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一 ...

  9. 从一个简单的main方法执行谈谈JVM工作机制

    本来JVM的工作原理浅到可以泛泛而谈,但如果真的想把JVM工作机制弄清楚,实在是很难,涉及到的知识领域太多.所以,本文通过简单的mian方法执行,浅谈JVM工作原理,看看JVM里面都发生了什么. 先上 ...

随机推荐

  1. Til the Cows Come Home (最短路模板题)

    个人心得:模板题,不过还是找到了很多问题,真的是头痛,为什么用dijkstra算法book[1]=1就错了..... 纠结中.... Bessie is out in the field and wa ...

  2. (C#)Windows Shell 外壳编程系列2 - 解释,从“桌面”开始展开

    (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一篇:(C#)Windows Shell 外壳编程系列1 - 基础,浏览一个文件夹 让我们详细解释一下 Shell 编程中最基本 ...

  3. wpf控件提示Value ‘’ can not convert

    我们在对控件的ErrorTemplate设置后,有时会出现Value '' can not convert. 为什么会出现呢? 原因:如果控件的输入值和null不能转换(比如控件要求的是int或flo ...

  4. 使用PowerShell在Azure China创建Data Warehouse

    微软的Azure Data Warehouse是基于MPP架构的分布式系统: Control Node负责管理系统和接受用户的请求,Compute Node负责计算. 目前在国内Azure Data ...

  5. ORA-28547:connection to server failed, probable Oracle Net admin error错误,解决方法

    当用navicat连接oralce数据库时报ORA-28547错误时,直接懵逼了,上网查了资料说是navicat自带的oci.dll文件的版本和服务器端的oralce数据库的版本不一致造成的. 修改O ...

  6. hihoCoder1304:24点

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 周末,小Hi和小Ho都在家待着. 在收拾完房间时,小Ho偶然发现了一副扑克,于是两人考虑用这副扑克来打发时间. 小Ho:玩 ...

  7. Python:列表中,增加元素、删除元素、切片、其它

    一.向列表中增加元素 list.append(单个元素):在list列表末端增加一个元素: list.extend([元素1,元素2]):在list列表末端增加多个元素: list.insert(元素 ...

  8. 某个应用使cpu使用率100%

    --CPU使用率 Linux是一个多任务的操作系统,将每个cpu的时间划分为很短的时间片,再通过调度器轮流分配给各个任务使用,因此造成多任务同时运行的错觉 为了维护cpu时间,linux通过事先定义的 ...

  9. Oracle 数据库迁移到MySQL (kettle,navicate,sql developer等工具

    Oracle 数据库迁移到MySQL (kettle,navicate,sql developer等工具 1 kettle --第一次使用kettle玩迁移,有什么不足之处和建议,请大家指正和建议. ...

  10. win10/server2019 系统安装 详解

    https://www.microsoft.com/zh-cn/software-download/windows10 https://go.microsoft.com/fwlink/?LinkId= ...