码迷,mamicode.com
首页 > 编程语言 > 详细

javascript中数组的深拷贝的方法

时间:2018-04-06 19:33:29      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:个数   代码   方便   情况   扩展运算   javascrip   for循环   java   asc   

一、什么是浅拷贝

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

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

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

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

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

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

 

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

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

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

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

 

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

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

  arrayObject.slice(start,end)

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

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

 

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

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

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

 

javascript中数组的深拷贝的方法

标签:个数   代码   方便   情况   扩展运算   javascrip   for循环   java   asc   

原文地址:https://www.cnblogs.com/Hyacinth-zqz/p/8428874.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!