一、什么是浅拷贝

  在js当中,我们常常遇到数组复制的的情况,许多人一般都会使用“=”来直接把一个数组赋值给一个变量,如

 var a=[1,2,3];
var b=a;
console.log(b);  //输出的是1,2,3
a[2]=0;
console.log(b);  //输出的是1,2,0

  把数组a用等号“=”的形式复制给变量b,这种就是js数组的浅拷贝。然而,正如上面代码所示,一旦对数组a做出修改,实际上会影响拷贝出来的其他数组,这并不是我们所想要的结果,因此就必须用到数组的深拷贝来解决这个问题。

二、实现数组的深拷贝的方法

(1)for循环实现数组的深拷贝

 var arr1 = [1, 2, 3];
var arr2 = [];
for (var i = 0; i < arr1.length; i++) {
arr2.push(arr1[i]);
}
arr1[0] = 4;
console.log(arr1); //4, 2, 3
console.log(arr2); //1, 2, 3

(2)concat 方法实现数组的深拷贝

  concat() 方法用于连接两个或多个数组。

  该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

 var arr1 = [1, 2, 3];
var arr2 = arr1.concat();
arr1[0] = 4;
console.log(arr1); //4, 2, 3
console.log(arr2); //1, 2, 3

(3)slice 方法实现数组的深拷贝

  slice() 方法可从已有的数组中返回选定的元素。

  arrayObject.slice(start,end)

  该方法返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

 var arr1 = [1, 2, 3];
var arr2 = arr1.slice(0);
arr1[0] = 4;
console.log(arr1); //4, 2, 3
console.log(arr2); //1, 2, 3

(4)ES6扩展运算符实现数组的深拷贝

  ...扩展运算符是ES6的语法,使用起来非常的方便简洁,相信在写ES6的时候也是备受欢迎的。

 var arr1 = [1, 2, 3];
var [...arr2] = arr1;
arr1[0] = 4;
console.log(arr1); //4, 2, 3
console.log(arr2); //1, 2, 3

javascript中数组的深拷贝的方法的更多相关文章

  1. 总结Javascript中数组各种去重的方法

    相信大家都知道网上关于Javascript中数组去重的方法很多,这篇文章给大家总结Javascript中数组各种去重的方法,相信本文对大家学习和使用Javascript具有一定的参考借鉴价值,有需要的 ...

  2. JavaScript中数组Array.sort()排序方法详解

    JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编 ...

  3. javascript中数组的22种方法

    × 目录 [1]对象继承 [2]数组转换 [3]栈和队列[4]数组排序[5]数组拼接[6]创建数组[7]数组删改[8]数组位置[9]数组归并[10]数组迭代[11]总结 前面的话 数组总共有22种方法 ...

  4. javascript中数组的22种方法 (转载)

    前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详 ...

  5. javascript中数组和字符串的方法比较

    × 目录 [1]可索引 [2]转换 [3]拼接[4]创建[5]位置 前面的话 字符串和数组有很多的相同之处,它们的方法众多,且相似度很高:但它们又有不同之处,字符串是不可变值,于是可以把其看作只读的数 ...

  6. JavaScript中数组相关的属性方法

    下面的这些方法会改变调用它们的对象自身的值: Array.prototype.copyWithin() 在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有的值. Array.prototype ...

  7. Javascript中数组查重的方法总结大全

    数组查重:简单点说,就是找出数组中重复的元素然后去除,最后得到一个没有重复元素的数组. // 方法一思路:     1.构建一个新的数组,用于存放结果.       2.for循环中每次从数组取出一个 ...

  8. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  9. JavaScript中数组常用方法的总结

    JavaScript中数组Array常用的方法总结 标签(空格分隔): JavaScript ECMAScript数组给我们提供了许多常用的方法,便于我们对数组进行操作,下面,就来总结一下这些方法. ...

随机推荐

  1. 24时区,GMT,UTC,DST,CST时间详解

    全球24个时区的划分      相较于两地时间表,可以显示世界各时区时间和地名的世界时区表(World Time),就显得精密与复杂多了,通常世界时区表的表盘上会标示着全球24个时区的城市名称,但究竟 ...

  2. 清除input[type=number]的默认样式

    input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, inp ...

  3. dva.js 用法总结

    dva.js是阿里前端团队开发的一个基于react.redux.webpack的一个前端框架,他能够实现react-redux-webpack环境一键部署,能帮前端工程师节省不少环境搭建的时间.而且经 ...

  4. 学习笔记-C++ STL iterator与对指针的理解-20170618

    vector的itrerator支持random access #include<iostream> #include<vector> using namespace std; ...

  5. 深度揭秘腾讯云TSF日调用量超万亿次背后技术架构

    腾讯云TSF是整合外部开源框架和腾讯内部历经多年锤炼的PaaS平台打造而成的企业级分布式应用服务开发与托管平台,本文重点对TSF中负责服务托管的PaaS平台进行揭秘,从技术角度解析TSF 平台是如何每 ...

  6. Loadrunner 11在win7录制中失败“the recording of the application was terminated by windows due to window data execution prevention feature"

    在录制过程中遇到如下问题: 查了下如何Enable, Disable Data Execution Prevention (DEP) in Windows 10/8/7 (http://www.the ...

  7. IPFS的竞争对手们(一)

    IPFS的竞争对手 IPFS这个项目真的开发很慢,相比其它区块链项目,IPFS的进度可真是让小编捉急,恨铁不成钢啊.然而小编仍然对他们充满信心,来,借用一句盗梦空间里的经典台词: 既然做梦,那就做大点 ...

  8. PDF加密无法做笔记

    尝试打印PDF,若无法打印,可以利用PDFescape(http://www.pdfescape.com/) PDFescape是一个可以在线修改.做笔记的网站,但是在线使用有上传PDF大小限制(小于 ...

  9. 基于keras的BiLstm与CRF实现命名实体标注

    众所周知,通过Bilstm已经可以实现分词或命名实体标注了,同样地单独的CRF也可以很好的实现.既然LSTM都已经可以预测了,为啥要搞一个LSTM+CRF的hybrid model? 因为单独LSTM ...

  10. React简明学习

    前面的话 React让组件化成为了前端开发的基本思路,比传统思路可以更好的控制前端复杂度,旧的开发方法受到了影响,如分离式的HTML/CSS.非侵入式JS.模板语言.MVC.CSS文件.Bootstr ...