一、什么是浅拷贝

  在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. linux升级python3.6相关命令

    sudo apt-get install python3.6 sudo update-alternatives --install /usr/bin/python python /usr/bin/py ...

  2. 智能合约语言 Solidity 教程系列8 - Solidity API

    这是Solidity教程系列文章第8篇介绍Solidity API,它们主要表现为内置的特殊的变量及函数,存在于全局命名空间里. 写在前面 Solidity 是以太坊智能合约编程语言,阅读本文前,你应 ...

  3. C++学习-11

    虚函数表,调试下断点,指针的自动变量 含有虚函数的类,它的内部含有虚指针指向虚函数表,此时的空类占有4个字节,不管有多少个虚函数,只需要一个虚函数指针指向虚函数表就可以了 构造函数不可以是虚函数,如果 ...

  4. 【解高次同余方程】51nod1038 X^A Mod P

    1038 X^A Mod P 基准时间限制:1 秒 空间限制:131072 KB 分值: 320 X^A mod P = B,其中P为质数.给出P和A B,求< P的所有X. 例如:P = 11 ...

  5. CSS备战春招の二

    CSS:层叠样式表 CSS注释形式:/*  */ class 选择器有别于id选择器,class可以在多个元素中使用 id属性不要以数字开头,以数字开头在特定浏览器中不起作用 类名的第一个字符不要使用 ...

  6. openstack中的环境准备

    openstack中环境准备基于Ubuntu系统 author:headsen chen   2017-10-13  11:51:50 个人原创,转载请注明作者,出处. 6 apt-get insta ...

  7. openstack安装系列问题:window7 64位安装的virtualBox 只能选择32位的系统安装不能选择64位的系统安装

    个人原创,转载请注明作者,出处,否则依法追究法律责任 2017-10-03-12:22:22 现象:window7 64位安装的virtualBox 只能选择32位的系统安装不能选择64位的系统安装 ...

  8. linux性能调试之vmstat

    linux性能监控调优工具vmstat: vmstat:用于监控.显示系统运行过程中的虚拟内存/CPU/磁盘状态. 简单示例(时间间隔2s,监控2次): 重要字段解释: r 表示运行队列(等待运行的进 ...

  9. vue技术解析六之生命周期函数

  10. 学习java第一章

    本人是一名5年工作的人了,出来社会也比较早,工作经验比起刚刚出社会的大学生要和很多了,知道社会的现实与无奈,我为什么选择想学java昵,肯定受到了朋友的影响的,接下来就讲讲我学习java的过程. 1. ...