我们看一下这个例子:

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. HDU 5418 Victor and World (状态压缩dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5418 题目大意:有n个结点m条边(有边权)组成的一张连通图(n <16, m<100000 ...

  2. 【NOIP2016提高组A组7.16】大鱼海棠

    题目 椿是掌管海棠花的少女,她所在的世界不为人们所知,他们的天空就是人类的海底.生活在那个世界里的他们不是人,也不是鱼,而是其他人,掌管着人间的规律. 按照他们的习俗,在16岁那年,椿变为一条海豚到人 ...

  3. js基础复习~Array对象

    Array对象 lenght 获取到数组的长度 concat() 方法用于合并两个或多个数组.此方法不会更改两大有数组,而是返回一个新的数组 let arr1 = ["a",&qu ...

  4. LeetCode--128--最长连续序列(python)

    给定一个未排序的整数数组,找出最长连续序列的长度. 要求算法的时间复杂度为 O(n). 示例: 输入: [100, 4, 200, 1, 3, 2]输出: 4解释: 最长连续序列是 [1, 2, 3, ...

  5. js设置定时器在规定的日期内替换掉页面

    <script type="text/javascript"> window.onload=function(){ var myspan=document.getEle ...

  6. Java框架之MybatisSQL注入漏洞

    一.SQL注入漏洞基本原理 在常见的web漏洞中,SQL注入漏洞较为常见,危害也较大.攻击者一旦利用系统中存在的SQL注入漏洞来发起攻击,在条件允许的情况下,不仅可以获取整站数据,还可通过进一步的渗透 ...

  7. UE4 质心相关

    Add force 始终给质心施加力,即使手动偏移了质心(Center of mass)也不例外. Add force at location local 相对于物体的原始质心位置增加一个偏移值后的位 ...

  8. Spring Cloud教程(八)云原生应用程序

    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线).分布式系统的协调导致了样板模式, 使用Spring Clo ...

  9. 模拟vue实现简单的webpack打包

    一.安装nodejs,查看是否安装成功 二.package.json项目初始化 npm init 电脑有node环境,在根目录下运行命令npm init初始化项目,根据提示输入项目相关信息,然后运行. ...

  10. Solr单机环境搭建及部署

    一.定义 官网的定义: Solr是基于Lucene构建的流行,快速,开放源代码的企业搜索平台.它具有高度的可靠性,可伸缩性和容错能力,可提供分布式索引,复制和负载平衡查询,自动故障转移和恢复,集中式配 ...