js 数组的浅拷贝和深拷贝

1.背景介绍

  javascript分原始类型与引用类型。Array是引用类型,直接用“=”号赋值的话,只是把源数组的地址(或叫指针)赋值给目的数组,指向的是同一个内存地址,其中一个改变另一个也会改变。并没有实现数组的数据的拷贝。这种方式的实现属于浅拷贝。

  深拷贝是开辟新的储存空间,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。

2.使用方法

数组浅拷贝:

var arr1 = [1, 2, 3, 4];
var arr2 = arr1; 
arr1[0] = 6;                //数组是用堆去保存的,相等的时候只是把存放的地址拷贝过去了,两个指向了同一个地址,所以在改变其中一个的值,其他的也跟着改变了
console.log(arr2[0]);       //输出结果为6
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[6, 2, 3, 4]

数组深拷贝:

1.JSON.stringify和JSON.parse方法

var arr1 = [1, 2, 3, 4];
var arr2 = JSON.parse(JSON.stringify(arr1)) //先将数组转为字符串,然后转成js对象
arr1[0] = 6; 
console.log(arr2[0]);       //输出结果为1
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[1, 2, 3, 4]

2.slice方法

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.slice(0);   //从0开始到末尾截取数组,然后返回一个新的数组
arr1[0] = 6; 
console.log(arr2[0]);       //输出结果为1
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[1, 2, 3, 4]

3.concat方法

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.concat();   //连接数组,如果连接的是一个空,那么也是返回了新的本身的数组
arr1[0] = 6; 
console.log(arr2[0]);       //输出结果为1
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[1, 2, 3, 4]

4.map方法

var arr1 = [1, 2, 3, 4]; 
var arr2 = arr1.map(function(value){
     return value;
})                          //使用map方法遍历数组然后返回新的数组,里面的值不变
arr1[0] = 6;   
console.log(arr2[0])        //输出结果为1
console.log(arr1);          //[6, 2, 3, 4]
console.log(arr2);          //[1, 2, 3, 4]

5.ES6语法

var arr1 = [1, 2, 3, 4];
var [ ...arr2 ] = arr1;     //ES6扩展运算符实现数组的深拷贝
arr1[0] = 6; 
console.log(arr2[0]);       //输出结果为1
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[1, 2, 3, 4]

6.用for循环遍历复制

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

 

 

简单来说,深拷贝主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。
浅拷贝主要拷贝的是对象的引用值,当改变对象的值,另一个对象的值也会发生变化。

那具体使用情况该使用浅拷贝还是深拷贝呢,没有一成不变的规则,一切都取决于具体需求~

 

给TA买糖
共{{data.count}}人
人已赞赏
经验教程

HTB系列之七:Bastard

2021-3-9 20:17:00

经验教程

JAVA-标识符、变量、数据类型

2021-3-9 21:36:00

⚠️
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。本站部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 momeis6@qq.com 或点击右侧 私信:momeis 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索