一、什么是浅拷贝

  在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. ETL总结(扫盲版)

      1.ETL名词解释 英文缩写 Extract-Transform-Load ,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至到目的端(一般指的是数 ...

  2. UML类图二

    在软件系统中,类并不是孤立存在的,类与类之间存在各种关系,对于不同类型的关系,UML提供了不同的表示方式.       1. 关联关系 关联(Association)关系是类与类之间最常用的一种关系, ...

  3. 永久开启完整版Google Play

    中国内地使用Play商店只能看见两个项目,即应用和游戏,但实际上有六个,见图.解决方法,第一,通过fqrouter2进入Play商店,见图,第二,通过google wallet. 参考网址:http: ...

  4. 设计模式——职责链模式(C++实现)

    #include <iostream> #include <string> using namespace std; class Handler { public: Handl ...

  5. 怎样使用yum安装OpenStack

      怎样使用yum安装OpenStack         headsen chen        2017-10-09  19:17:15 个人原创博客,转载请注明作者,出处,否则追究法律责任 [sh ...

  6. MongoDB3.6之Replica Set初步体验

    Replica Set在国内叫做副本集,简单来说就是一份数据在多个地方存储.         1.为什么要用副本集,什么时候使用副本集?   有人说一份数据在多个地方存储占用了大量的额外空间,是一种浪 ...

  7. java安全框架shiro(一)

    第一个简单的案例 ,通过读取.ini文件的方式模拟登陆, 1.通过Factory工厂的getInstance()方法来获取SecurityManager的实例,实例化Factory需要一个ini文件的 ...

  8. HEX文件合并方法

    通过开发嵌入式系统时,可能需要boot引导应用程序,一个小工程就需要两个hex文件进行合并,但是生产的时候都是裸片烧的,因此需要将两个合并为一个文件 以下是具体合并的方法: 1.确保自检安装了ultr ...

  9. ELK学习笔记(一)安装Elasticsearch、Kibana、Logstash和X-Pack

    最近在学习ELK的时候踩了不少的坑,特此写个笔记记录下学习过程. 日志主要包括系统日志.应用程序日志和安全日志.系统运维和开发人员可以通过日志了解服务器软硬件信息.检查配置过程中的错误及错误发生的原因 ...

  10. RabbitMQ第四篇:Spring集成RabbitMQ

    前面几篇讲解了如何使用rabbitMq,这一篇主要讲解spring集成rabbitmq. 首先引入配置文件org.springframework.amqp,如下 <dependency> ...