我们看一下这个例子:

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. 设计模式Design Pattern(3) -- 责任链模式

    什么是责任链模式? 责任链模式(Chain of Responsibility Pattern):请求知道公开接口,但不知道那个具体类处理,这些具体处理类对象连接成一条链.请求沿着这条链传递,直到有对 ...

  2. 花式赋值、列表、字典、解压缩、input()、格式化学习笔记

    目录 花式赋值 列表(list) 字典(dict) 解压缩 input()与用户交互 格式化的三种方式 f_String格式化(important) %s.%d占位符 format 格式化(不常用) ...

  3. Nginx 作为代理服务与负载均衡

    代理服务 代理一代为办理(代理理财.代理收货等等) 代理区别 区别在于代理的对象不一样 正向代理代理的对象是客户端 反向代理代理的对象是服务端 反向代理配置 server { listen 80; s ...

  4. 树莓派安装配置teamviewer host

    过程: 下载teamviewer,直接到teamviewer的官网上直接下载 下载完后,安装teamviewerw sudo dpkg -i 下载的文件的路径+文件名 安装完后会提示存在依赖问题,修复 ...

  5. fedora18 You might need to install dependency packages for libxcb.

    22 down vote The page Qt for X11 Requirements lists some packages required to build Qt on Debian. Th ...

  6. leetcode-mid-Linked list- 116. Populating Next Right Pointers in Each Node

    mycode   93.97% """ # Definition for a Node. class Node(object): def __init__(self, v ...

  7. Linux网卡驱动分析

    以太网(Ethernet)是一种计算机局域网组网技术,基于IEEE 802.3标准,它规定了包括物理层的连线.电信号和介质访问层协议. Ethernet接口的实质是MAC通过MII总线控制PHY的过程 ...

  8. SQL优化—nested loop优化

    跑批时间段22:00-23:00,生成AWR报告 分析sql:SQL_ID='5hfw4smzs2pqw' 执行计划: SQL> select *  FROM TABLE(DBMS_XPLAN. ...

  9. 织梦自定义表单导出为excel功能

    1.首先在后台修改/dede/templets/diy_main.htm <a href="../plus/diy.php?action=daochu&diyid={dede: ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_12_练习_文件复制

    谁用字节可以读取任何文件. 读取后再写入到D盘去.这就是一个文件的复制. 怎么由C盘到D盘.这里要借助流技术 需要创建两个流,一个读取一个写入 图片复制过来了. 看一下图片的字节数.whilte循环要 ...