我们看一下这个例子:

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数组中的引用类型的更多相关文章

  1. 统计js数组中奇数元素的个数

    如何统计一个JS数组中奇数元素的个数呢? 这是群友提出的一个问题,大部分群友给出的是遍历 然后对2取模,得到最终结果. 这样的写法是最容易想得到的,那么有没有其他思路呢? 这里我提供另外一种思路,我们 ...

  2. js数组中的find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()方法的详解和应用实例

    1. find()与findIndex() find()方法,用于找出第一个符合条件的数组成员.它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该 ...

  3. js数组中的reverse()方法

    reverse方法是将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组.由于本人是学习js的新人,对reverse函数进行了几个小实验,以下实验均在Chrome浏览器上运行 实验一:reve ...

  4. js数组中foEach和map的用法详解 jq中的$.each和$.map

    数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...

  5. 为什么改了JS数组中的一个元素的值,其他数组元素值都跟着变了

    原因: 数组是引用类型,数组变量存储在栈,元素数据存储在堆中,将数组赋值不同的对象,所以的赋值对象都指向堆同一个数据,所以改变其中一个数组中的元素,别的数组元素也会改变. 解决方案: 原理就是先把数组 ...

  6. js数组中的常用方法总结

    栈方法(后进先出) ArrayObj.push()方法 ArrayObj.pop()方法 ArrayObj.push():就是向数组末尾添加新的元素,返回的是数组新的长度.ArrayObj.pop() ...

  7. js数组中indexOf/filter/forEach/map/reduce详解

    今天在网上看到一篇帖子,如题: 出处:前端开发博客 (http://caibaojian.com/5-array-methods.html) 在ES5中一共有9个Array方法,分别是: Array. ...

  8. JS数组中every(),filter(),forEach(),map(),some()方法学习笔记!

    ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...

  9. js数组中去除重复对象及去除空对象的方法

    (function(){//去除数组中重复对象 var unique = {}; arr.forEach(function(a){ unique[ JSON.stringify(a) ] = 1 }) ...

随机推荐

  1. 【NOIP2015模拟10.22】最小代价

    前言 本来在比赛上就想到最小生成树了,但不相信这道题那么简单,然后就没有然后了... 题目 给出一幅由n个点m条边构成的无向带权图. 其中有些点是黑点,其他点是白点. 现在每个白点都要与他距离最近的黑 ...

  2. A1011

    找最大的,然后按规定计算后输出. 没啥可说的,除非犯了愚蠢的错误(比如把j写成i这种),按题目要求写就是了. #include<cstdio> int main(){ ]={'W','T' ...

  3. springboot2.0+mysql整合mybatis,发现查询出来的时间比数据库datetime值快了8小时

    参考:https://blog.csdn.net/lx12345_/article/details/82020858 修改后查询数据正常

  4. MySQL把多条数据给汇总成一条数据

    用到的是这个函数: group_concat() select group_buying_id, group_concat(app_user_ids) from org_user_group grou ...

  5. Java异常处理的基础知识

    Java中的异常捕获语句 Try{ //可能发生运行错误的代码: } catch(异常类型 异常对象引用){ //用于处理异常的代码 } finally{ //用于“善后” 的代码 } Java 中所 ...

  6. 构建嵌入式Linux交叉编译工具链

    开源交叉编译工具链制作方法汇总: 1) 使用crosstool/crosstool-ng生成 2) 使用buildroot生成 ARM交叉编译工具链说明: 1) arm-linux-gcc是一个集合命 ...

  7. Android Build System Ultimate Guide

    Android Build System Ultimate Guide April 8,2013 Lately, Android Open Source Project has gone throug ...

  8. fedora23然后创建workspace?或者说是panel面板?

    好像在fedora23中 无法再添加工作空间workspace. 系统会自动的在非空工作空间后面再生成一个空的工作空间. 而且 工作空间 好像不只 4个, 可以有很多个. panel面板好像也不能添加 ...

  9. 【tensorflow使用笔记一】:安装linux下tensorflow环境的问题

    首先安装Python Python2.7 使用pip安装Python-numpy发现有老版本影响import直接手动删除: 安装default-jdk顺利: 安装matplotlib发现没有tkint ...

  10. 杂项-站点:SharePoint

    ylbtech-杂项-门户站点:SharePoint SharePoint Portal Server 2003 是一个门户站点,使得企业能够开发出智能的门户站点,这个站点能够无缝连接到用户.团队和知 ...