发表于: 2017-04-25 20:43:33

1 1102


【js-02】如何实现数组深拷贝与浅拷贝

小课堂【郑州第92期】

分享人:董瑞


1.背景介绍

在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,也就是复制、克隆或者说做拷贝


要弄明白拷贝,首先要明白js中对象的组成。在js中一切实例皆是对象,具体分为原始类型和合成类型。原始类型对象指的是number、string、boolean等,合成类型对象指的是array、object以及function。 数组的拷贝有深有浅,下面具体分析!

2.知识剖析

浅拷贝

浅拷贝可以理解为就是复制一份来引用,所有引用对象都指向一份数据,并且都可以修改这份数据。 对于字符串类型,浅拷贝是对值的拷贝,对于对象来说,浅拷贝是对对象地址的拷贝,也就是复制 的结果是两个对象指向同一个内存地址,修改其中一个对象的属性,则另一个对象的属性也会改变


                    
                        var a = ['大娃','二娃', '三娃' //定义一个名为a的数组,里面有3个值,
                        ];
                        var b = a;   //定义一个变量b,把a赋值给他,这样比、b和a一样了
                        b[2] = '开放'; //然后把b的第三个值等于开放
                        console.log(a)//那么现在打印a 是什么结果呢                    
                


深拷贝

深拷贝则是复制变量值,对于非基本类型的变量,则递归至基本类型变量后,再复制。 深复制不同于浅复制,它会开辟新的内存地址,两个对象对应两个不同的地址,修改 一个对象的属性,不会改变另一个对象的属性

实现数组深拷贝有两种方法


方法一: 用js的slice函数来实现


方法二:用js的concat方法

3.常见问题


浅拷贝的缺点是如果你改变了对象B所指向的内存地址,你同时也改变了对象A指向这个地址的字段。


深拷贝,这种方式会完全拷贝所有数据,优点是B与A不会相互依赖(A,B完全脱离关联), 缺点是拷贝的速度更慢,代价更大 (可理解为耗费了更多内存空间)

4.解决方案

其实最主要的是看需求,如果已经处理过的数据不需要重复使用,那么久使用浅拷贝也没什么,还可以省却占用的内存,但是如果需要重复使用原始数据的话,那么深拷贝就是一个更好的选择了,是具体情况而定。

5.编码实战


slice方法

对于array对象的slice函数,
返回一个数组的一段。(仍为数组)
arrayObj.slice(start, [end])
参数:
arrayObj
必选项。一个 Array 对象。
start
必选项。arrayObj 中所指定的部分的开始元素是从零开始计算的下标。
end
可选项。arrayObj 中所指定的部分的结束元素是从零开始计算的下标。

                
                    var arr = ["One","Two","Three"];
                    var arrtoo = arr.slice(0);
                    arrtoo[1] = "set Map";
                    console.log(arr);//One,Two,Three
                    console.log(arrtoo);//One,set Map,Three                
            


concat方法

concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
语法
arrayObject.concat(arrayX,arrayX,......,arrayX)
说明
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

                
                    var arr1 = ["One","Two","Three"];
                    var arrtooo = arr1.concat();
                    arrtooo[1] = "set Map To";
                    console.log(arr1);//One,Two,Three
                    console.log(arrtooo);//One,set Map To,Three                
            


6.扩展思考

对象类型的深浅拷贝,这个以前没用过,真心没怎么理解,放个链接以示诚意

此处可点→→→知乎上的深浅拷贝

脚本之家上的js对象浅拷贝和深拷贝详解 http://www.jb51.net/article/91906.htm

7.参考文献

参考一:数组的拷贝

参考一:原始数据类型和对象类型的区别及深度拷贝解析

8.更多讨论

目前遇到哪些需要区别深层拷贝和浅层拷贝才能解决的问题


文本链接:

http://www.jnshu.com/daily/21418?uid=9388


视频链接:

https://v.qq.com/x/page/w0397r5t6ji.html


PPT链接:

https://ptteng.github.io/PPT/PPT/js-02-deepcopy%20and%20lightcopy.html#/




返回列表 返回列表
评论

    分享到