JavaScript数组复制：浅拷贝与concat深拷贝的区别

JavaScript数组复制：浅拷贝与concat深拷贝的区别

在JavaScript开发中，若需对数组进行复制操作，开发者通常会考虑以下几种实现路径。

代码

var arr1 = [1,2,3,4,5];

var arr2 = [];

arr2 = arr1;

console.log(arr1);

console.log(arr2);

运行上述代码，控制台输出结果如下所示。

[1, 2, 3, 4, 5]

[1, 2, 3, 4, 5]

该示例展示了将数组arr1直接赋值给变量arr2的过程。

观察控制台输出，看似成功复制了数组内容并生成了一个新的相同数组。

然而，由于数组在JavaScript中属于“引用类型”数据，直接赋值并不会复制其实际值，而是让两个变量指向同一块内存地址。

基于上述原理，我们进一步编写以下测试代码。

arr2.push(6);

 

console.log(arr1);

console.log(arr2);

再次运行代码，观察到的结果如下。

[1, 2, 3, 4, 5, 6]

[1, 2, 3, 4, 5, 6]

从执行结果可以看出，即便仅向arr2追加新元素6，原数组arr1中也随之增加了元素6。这正是由于两个变量共同引用了同一存储位置所致。

这意味着，只要修改任一数组中的数据，另一个数组的内容也会同步发生变化，因为二者指向相同的内存空间。

为解决此问题，下文将介绍如何使用concat方法来实现数组的独立复制。

具体实现示例如下。

var arr1 = [1,2,3,4,5]; 

var arr2 = [];

  

arr2 = arr1.concat();

arr2.push(6);

 

console.log(arr1);

console.log(arr2);

运行该示例，控制台输出结果如下。

[1, 2, 3, 4, 5]

[1, 2, 3, 4, 5, 6]

若需将数组arr1的内容复制到arr2，只需在源数组arr1上调用concat()方法即可实现。