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="小强"
再看一下,此时的情况吧!
效果是不是很明显哈!
js/jq基础(日常整理记录)-2-一个简单的js方法实现集合的非引用拷贝的更多相关文章
- js new一个对象的过程,实现一个简单的new方法
对于大部分前端开发者而言,new一个构造函数或类得到对应实例,是非常普遍的操作了.下面的例子中分别通过构造函数与class类实现了一个简单的创建实例的过程. // ES5构造函数 let Parent ...
- Node.js npm基础安装配置&创建第一个VUE项目
使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...
- JavaScript--我发现,原来你是这样的JS(基础概念--灵魂篇,一起来学js吧)
介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第三篇(灵魂篇介绍),有着剩下的第三章的知识内容,当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的,要看懂 ...
- 只是一个用EF写的一个简单的分页方法而已
只是一个用EF写的一个简单的分页方法而已 慢慢的写吧.比如,第一步,先把所有数据查询出来吧. //第一步. public IQueryable<UserInfo> LoadPagesFor ...
- js/jq基础(日常整理记录)-1-纯js格式化时间
一.纯js格式化时间 之前记录了一些,工作中发现的比较常用的使用,就记录一下. 由于很基础,就直接贴出来了,不做分析了. 改造一下Date的原型 Date.prototype.format = fun ...
- js/jq基础(日常整理记录)-4-一个简单的自定义tree插件
一.一个简单的自定义tree插件 上一篇是之前自定义的table插件,这一篇也是之前同期尝试做的一个tree插件. 话不多说,先看看长什么样子哈! 现在来看确实不好看,以后在优化吧! 数据源:ajax ...
- 【Java基础】用LinkedList实现一个简单栈的功能
栈的基本功能 栈的最基本功能是保障后进先出,然后在此基础上可以对在栈中的对象进行弹入弹出,此外,在弹出时,如果栈为空,则会报错,所以还需要提供获取当前栈大小的方法. 构造存储对象Student /** ...
- JS中的内置对象简介与简单的属性方法
JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一 ...
- 从一个简单的main方法执行谈谈JVM工作机制
本来JVM的工作原理浅到可以泛泛而谈,但如果真的想把JVM工作机制弄清楚,实在是很难,涉及到的知识领域太多.所以,本文通过简单的mian方法执行,浅谈JVM工作原理,看看JVM里面都发生了什么. 先上 ...
随机推荐
- C#异步编程(四)混合模式线程同步
之前讨论了基元用户模式和内核模式线程同步构造.其他所有线程同步构造都基于它们,而且一般都合并了用户模式和内核模式构造,我们称为混合线程同步构造.没有线程竞争时,混合构造提供了基元用户模式构造所具有的性 ...
- 使用dumpbin命令查看dll导出函数及重定向输出到文件【轉】
查看dll导出函数,一般使用Viewdll等第三方工具. VS开发环境中,可以查看32位和64位的dll.具体使用方法如下: 1. 进入VS开发环境,然后Tools -> Visual stud ...
- python之 python 起源、语言特点
一. 1.1 什么是 PythonPython 是一门优雅而健壮的编程语言,它继承了传统编译语言的强大性和通用性,同时也借鉴了简单脚本和解释语言的易用性.它可以帮你完成工作,而且一段时间以后,你还能 ...
- 三、Jmeter--HTTP请求默认值(HTTP Request Defaults)和访问地址参数化
一.HTTP请求默认值(HTTP Request Defaults) 1. 在本地搭建了一个wordpress开源论坛,那么我每次访问论坛的地址(服务器名称或IP)是不变的,端口也是不变的,协议也是不 ...
- flask之python3 虚拟环境及使用dotnv来永久保存环境变量
Python 3 comes bundled with the venv module to create virtual environments Create an environment Cre ...
- 解决IDEA输入法不跟随
1.关掉idea后在idea的安装路径下把jre64文件夹删掉,或者重命名也行,如把jre64改成jre642: 2.升级jdk版本至jdk 8u45以上 3.把Java安装路径下的jre文件拷贝到I ...
- U盘操作
一.8G的U盘被设置为2G,如何恢复 1.下载usboot 1.7 打开以后,选中U盘,点击[点击此处选择工作模式],选择[用0重置参数] ,然后点[开始].2.完成后它会提示拔下U盘,此时拔下U盘, ...
- Linux驱动 - 多线程之 完成量
Linux 系统提供了一种比信号量更好的同步机制,即完成量(completion ,它用于一个执行单元等待另一个执行单元执行完某事. Linux 系统中与 completion 相关的操作主要有以下 ...
- java继承。顾不了
总结:为什么结果显示所有数据都重复输出了呢? package com.sa; //java里的几个难以理解的概念.字节码文件.class文件.源文件 //.class文件指的是.编译后产生的字节码文件 ...
- 开发环境无错,部署至测试环境报错“NoSuchMethodError”OR"NoSuchClassError"
背景: 实现一个简单的功能,需要用到jedis的jar包连接Redis.在之前便已经有使用jedis,它的版本比较旧,是2.1的.而新实现的功能,在编码的时候使用的是2.8的.在开发环境完成单元测试后 ...