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 }) ...
随机推荐
- 设计模式Design Pattern(3) -- 责任链模式
什么是责任链模式? 责任链模式(Chain of Responsibility Pattern):请求知道公开接口,但不知道那个具体类处理,这些具体处理类对象连接成一条链.请求沿着这条链传递,直到有对 ...
- 花式赋值、列表、字典、解压缩、input()、格式化学习笔记
目录 花式赋值 列表(list) 字典(dict) 解压缩 input()与用户交互 格式化的三种方式 f_String格式化(important) %s.%d占位符 format 格式化(不常用) ...
- Nginx 作为代理服务与负载均衡
代理服务 代理一代为办理(代理理财.代理收货等等) 代理区别 区别在于代理的对象不一样 正向代理代理的对象是客户端 反向代理代理的对象是服务端 反向代理配置 server { listen 80; s ...
- 树莓派安装配置teamviewer host
过程: 下载teamviewer,直接到teamviewer的官网上直接下载 下载完后,安装teamviewerw sudo dpkg -i 下载的文件的路径+文件名 安装完后会提示存在依赖问题,修复 ...
- 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 ...
- 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 ...
- Linux网卡驱动分析
以太网(Ethernet)是一种计算机局域网组网技术,基于IEEE 802.3标准,它规定了包括物理层的连线.电信号和介质访问层协议. Ethernet接口的实质是MAC通过MII总线控制PHY的过程 ...
- SQL优化—nested loop优化
跑批时间段22:00-23:00,生成AWR报告 分析sql:SQL_ID='5hfw4smzs2pqw' 执行计划: SQL> select * FROM TABLE(DBMS_XPLAN. ...
- 织梦自定义表单导出为excel功能
1.首先在后台修改/dede/templets/diy_main.htm <a href="../plus/diy.php?action=daochu&diyid={dede: ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_12_练习_文件复制
谁用字节可以读取任何文件. 读取后再写入到D盘去.这就是一个文件的复制. 怎么由C盘到D盘.这里要借助流技术 需要创建两个流,一个读取一个写入 图片复制过来了. 看一下图片的字节数.whilte循环要 ...