js数组中的引用类型
我们看一下这个例子:
let a={tile:'深复制'};
let b=a;
a.title='浅复制';
那么我们会获得两个对象,一个a,一个b,a的title是浅复制,b的title是深复制。
但结果真是这样吗?
我们console.log一下

为啥两个都是输出"浅复制"。。。。
其实,a,b是共用同一个地址,所以虽然看起来是两个对象,其实就是一个对象,a===b,这就是深复制,复制的不仅仅是数据,而且连地址一起复制过来了,相当于Windows的快捷方式,表面上看起来一个在C盘,一个在D盘,其实都是一个文件。
那么,如果我们仅仅想复制”深复制“这三个字呢?a的title和b的title要不同,我们如何来做。
let a={title:'深复制'};
let b={...a,content:"一个教程"};
a.title='浅复制';
console.log(a.title);
console.log(b.title);
我们再来看打印结果

这样我们虽然复制了a的所有数据,但是a和b是不同的对象,更改任意一个的数据,不会影响到第二个,而且b还可以对a 进行拓展,比如加了content一个字段。
添加一个字段很烦?那再来说说这个
let a=[1,23];
let b=[...a];
b[1]=32;
console.log(a); //[1, 23]
console.log(b); //[1, 32]
看到了么?ES6的剩余参数也可以直接做到深复制,完全不需要添加字段或者数组a.concat('')来进行复制
更新,上面这个不对,往下看
let a =[{a:1}]
let b = JSON.parse(JSON.stringify(a))
b[0].a=3
consloe.log(a[0].a) //
用json转才可以完成深赋值,因为字符串转成对象之后就是一个新的对象了;
js数组中的引用类型的更多相关文章
- 统计js数组中奇数元素的个数
如何统计一个JS数组中奇数元素的个数呢? 这是群友提出的一个问题,大部分群友给出的是遍历 然后对2取模,得到最终结果. 这样的写法是最容易想得到的,那么有没有其他思路呢? 这里我提供另外一种思路,我们 ...
- js数组中的find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()方法的详解和应用实例
1. find()与findIndex() find()方法,用于找出第一个符合条件的数组成员.它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该 ...
- js数组中的reverse()方法
reverse方法是将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组.由于本人是学习js的新人,对reverse函数进行了几个小实验,以下实验均在Chrome浏览器上运行 实验一:reve ...
- js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
- 为什么改了JS数组中的一个元素的值,其他数组元素值都跟着变了
原因: 数组是引用类型,数组变量存储在栈,元素数据存储在堆中,将数组赋值不同的对象,所以的赋值对象都指向堆同一个数据,所以改变其中一个数组中的元素,别的数组元素也会改变. 解决方案: 原理就是先把数组 ...
- js数组中的常用方法总结
栈方法(后进先出) ArrayObj.push()方法 ArrayObj.pop()方法 ArrayObj.push():就是向数组末尾添加新的元素,返回的是数组新的长度.ArrayObj.pop() ...
- js数组中indexOf/filter/forEach/map/reduce详解
今天在网上看到一篇帖子,如题: 出处:前端开发博客 (http://caibaojian.com/5-array-methods.html) 在ES5中一共有9个Array方法,分别是: Array. ...
- JS数组中every(),filter(),forEach(),map(),some()方法学习笔记!
ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...
- js数组中去除重复对象及去除空对象的方法
(function(){//去除数组中重复对象 var unique = {}; arr.forEach(function(a){ unique[ JSON.stringify(a) ] = 1 }) ...
随机推荐
- 【NOIP2015模拟10.22】最小代价
前言 本来在比赛上就想到最小生成树了,但不相信这道题那么简单,然后就没有然后了... 题目 给出一幅由n个点m条边构成的无向带权图. 其中有些点是黑点,其他点是白点. 现在每个白点都要与他距离最近的黑 ...
- A1011
找最大的,然后按规定计算后输出. 没啥可说的,除非犯了愚蠢的错误(比如把j写成i这种),按题目要求写就是了. #include<cstdio> int main(){ ]={'W','T' ...
- springboot2.0+mysql整合mybatis,发现查询出来的时间比数据库datetime值快了8小时
参考:https://blog.csdn.net/lx12345_/article/details/82020858 修改后查询数据正常
- MySQL把多条数据给汇总成一条数据
用到的是这个函数: group_concat() select group_buying_id, group_concat(app_user_ids) from org_user_group grou ...
- Java异常处理的基础知识
Java中的异常捕获语句 Try{ //可能发生运行错误的代码: } catch(异常类型 异常对象引用){ //用于处理异常的代码 } finally{ //用于“善后” 的代码 } Java 中所 ...
- 构建嵌入式Linux交叉编译工具链
开源交叉编译工具链制作方法汇总: 1) 使用crosstool/crosstool-ng生成 2) 使用buildroot生成 ARM交叉编译工具链说明: 1) arm-linux-gcc是一个集合命 ...
- Android Build System Ultimate Guide
Android Build System Ultimate Guide April 8,2013 Lately, Android Open Source Project has gone throug ...
- fedora23然后创建workspace?或者说是panel面板?
好像在fedora23中 无法再添加工作空间workspace. 系统会自动的在非空工作空间后面再生成一个空的工作空间. 而且 工作空间 好像不只 4个, 可以有很多个. panel面板好像也不能添加 ...
- 【tensorflow使用笔记一】:安装linux下tensorflow环境的问题
首先安装Python Python2.7 使用pip安装Python-numpy发现有老版本影响import直接手动删除: 安装default-jdk顺利: 安装matplotlib发现没有tkint ...
- 杂项-站点:SharePoint
ylbtech-杂项-门户站点:SharePoint SharePoint Portal Server 2003 是一个门户站点,使得企业能够开发出智能的门户站点,这个站点能够无缝连接到用户.团队和知 ...