前端程序员Web前端之路

数组的拷贝

2018-01-29  本文已影响36人  avery1

前面已经有过对象的拷贝一文

对象的拷贝

我们再来看下数组的拷贝

方法来源stackflow

Copying array by value in JavaScript

首先我们要明确一个问题就是,对于javascript里的数据类型,基本数据类型(string,number,boolean)的赋值是真的赋值操作,而引用数据类型(Object)赋值的是内存地址。undefined和null在这里就不讨论了。

基本类型的赋值

那么有些时候我们需要对引用数据类型的赋值然后操作的时候直接赋值,会导致对赋值对象的操作也会引起原对象的改变。这里我们来看数组的操作。

数组的复制操作

可以看出,新数组的修改,也会导致数组的变化。所以有些时候需要我们对数组进行拷贝。

1、循环,还是万能的循环

基本类型的数组 引用类型的数组

我们可以看出基本类型的数组简单的for循环还是没问题,又跟对象拷贝的一样了。对于基本的push操作这种拷贝是够用的。在深层的拷贝自己实现去吧,这里就不写了。

2、slice

slice方法是分割数组的方法,两个可选参数是起始位位置和结束位置。当不写参数的时候可以实现基本的拷贝操作,这个也是比较常用的数组拷贝方法。

继续使用上面定义的数组对象

slice实现数组拷贝

可以看出slice实现基本的拷贝,也就是基本的push操作还是可以使用的,但是赋值操作就不可以了。

基本数据类型的slice拷贝

基本数据类型的slice拷贝是可以使用没问题的。

3、concat

数组的连接,和自己连接也实现基本的拷贝功能,类似slice()

concat实现数组的拷贝

4、ES6方法

扩展运算符

扩展语句

es6 扩展运算符 三个点(...)

ES6方法拷贝数组

和上面一样的效果。

5、最简单粗暴地方法,转成字符串再转成对象,但是不推荐的方法

parse stringfy

let newArr = JSON.parse(JSON.stringify(arr))

这个绝对是深拷贝的方法。

6、Array.from()

ES6方法  

Array.from()

es6 数组对象新增方法 Array.from()将两类对象转为真正的数组

基本数据类型的操作 引用类型的操作
上一篇下一篇

猜你喜欢

热点阅读