javascript 数组的深浅拷贝

一、浅拷贝    

用 = 来复制

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

我们会发现,改变数组arr2的值,arr1也跟着变了。


二、深拷贝

1.数组元素是基本类型(字符串、数值、布尔、null、undefined)

a.利用数组提供的slice或者concat方法。

var arr1 = ['old',1,true,null,undefined];
var arr2 = arr1.concat();
var arr3 = arr1.slice();
console.log(arr1);  //['old',1,true,null,undefined]
console.log(arr2);  //['old',1,true,null,undefined]
console.log(arr3);  //['old',1,true,null,undefined]
arr1[0]='new';
arr2[2]=false;
console.log(arr1);  //['new',1,true,null,undefined]
console.log(arr2);  //['old',1,false,null,undefined]
console.log(arr3);  //['old',1,true,null,undefined]

我们会发现改变某个数组中的值时,不会对其他数组产生影响。



b.扩展运算符(ES6新增    结合数组使用,把数组的元素用逗号分隔开来,组成一个序列

var arr1 = ['old',1,true,null,undefined];
var [...arr2] = arr1;
console.log(arr1);    //["old", 1, true, null, undefined]
console.log(arr2);    //["old", 1, true, null, undefined]
arr1[0]='new';
console.log(arr1);    //["new", 1, true, null, undefined]
console.log(arr2);    //["old", 1, true, null, undefined]
我们会发现改变某个数组中的值时,不会对其他数组产生影响。

2.数组元素是对象或者数组时

用过用concat我们会发现,改变其中一个数组中对象或数组的值时,另一个数组也变了。(用slice或者扩展运算符是一样的)


var arr1 = [{name: '张三'}, [1,2,3],1];
var arr2 = arr1.concat();
//这里没有console.log是因为输出对象值,查看的时候会显示最后的引用(console是浏览器提供的,不是ECMA提供的,不同浏览器实现可能不一样,chrome的实现是异步的)
arr1[0].name = '李四';
arr1[1][0] = 5;
arr1[2]=7;
console.log(arr1); // [{name: '李四'}, [5,2,3],7]
console.log(arr2); // [{name: '李四'}, [5,2,3],1]


所以,我们需要用另一种方法——借用JSON对象的方法stringfy()和parse()。(注:JSON.stringfy():把js对象序列化为json字符串;JSON.parse():把json字符串解析为原生js值)


var arr1 = [{name: '张三'}, [1,2,3],1];
var arr2 = JSON.parse(JSON.stringify(arr1));
arr1[0].name = '李四';
arr1[1][0] = 5;
arr1[2]=7;
console.log(arr1); // [{name: '李四'}, [5,2,3],7]
console.log(arr2); // [{name: '张三'}, [1,2,3],1]


关于数组的拷贝就到这里了,以后有新的思绪再补充。






  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值