前面已经有过对象的拷贝一文
我们再来看下数组的拷贝
方法来源stackflow
Copying array by value in JavaScript
首先我们要明确一个问题就是,对于javascript里的数据类型,基本数据类型(string,number,boolean)的赋值是真的赋值操作,而引用数据类型(Object)赋值的是内存地址。undefined和null在这里就不讨论了。

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

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


我们可以看出基本类型的数组简单的for循环还是没问题,又跟对象拷贝的一样了。对于基本的push操作这种拷贝是够用的。在深层的拷贝自己实现去吧,这里就不写了。
2、slice
slice方法是分割数组的方法,两个可选参数是起始位位置和结束位置。当不写参数的时候可以实现基本的拷贝操作,这个也是比较常用的数组拷贝方法。
继续使用上面定义的数组对象

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

基本数据类型的slice拷贝是可以使用没问题的。
3、concat
数组的连接,和自己连接也实现基本的拷贝功能,类似slice()

4、ES6方法
扩展运算符

和上面一样的效果。
5、最简单粗暴地方法,转成字符串再转成对象,但是不推荐的方法
parse stringfy
let newArr = JSON.parse(JSON.stringify(arr))
这个绝对是深拷贝的方法。
6、Array.from()
ES6方法
es6 数组对象新增方法 Array.from()将两类对象转为真正的数组


网友评论