在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生。

# 直接赋值

var arr1 = [1, 2, 3]
var arr2 = arr1
arr2[1] = 4

console.log(arr1)   //[1, 4, 3]
console.log(arr2)   //[1, 4, 3]

1
2
3
4
5
6
7

这样子直接将一个数组赋值给另一个数组,得到的数组,当我们对这个新数组进行某些操作的时候,我们会发现,它把源数组也给影响了,这并不是我们想要的,我们想要的是新数组的操作不影响源数组,所以问题就出现了,我们要怎么样才能达到深复制的效果呢。

# slice函数

var arr1 = [1, 2, 3]
var arr2 = arr1.slice(0)
arr2[1] = 4

console.log(arr1)   //[1, 2, 3]
console.log(arr2)   //[1, 4, 3]

1
2
3
4
5
6
7

很明显,当我们改变arr2的时候,我们的arr1并没有发生改变,输出的依然是[1, 2, 3],arr1.slice(0)就是取得整个数组,返回一个新的数组,正好将整个数组复制了一般,得到的arr2是一个全新的数组,我们对其进行元素操作,并不会让源数组受到影响,所以这种方式达到了我们要的效果,也就是我们说的深复制。

# concat

 var arr1 = [1, 2, 3]
 var arr2 = arr1.concat()
 arr2[1] = 4

 console.log(arr1)   //[1, 2, 3]
 console.log(arr2)   //[1, 4, 3]

1
2
3
4
5
6
7

这里,我们也达到了深复制的效果,concat() 方法用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本,所以我们这样操作并不会影响到源数组,从而也实现了我们要的效果。

其实,在我们的开发过程中,会有很多这样的场景,我们需要的是深复制,我们要的是新数组的改变不会改变源数组,我们其实只是想备份一个数组,上面两种方式都可以达到我们要的效果,所以可以试试。

更新于: 7/8/2020, 7:46:15 AM