前端数组拷贝的深坑：浅拷贝与深拷贝的区别

前端

2024-01-18 18:10:55

<文章>

前端踩坑：数组拷贝

数组的拷贝是一个常见操作，但如果不了解浅拷贝和深拷贝的区别，可能会导致一些意外问题。

浅拷贝

浅拷贝只拷贝数组的引用，不会拷贝引用类型的值。这意味着如果数组中包含引用类型（如对象或数组），则浅拷贝后的新数组仍将指向同一内存位置。如果修改新数组中的引用类型值，则原数组中的值也会受到影响。

深拷贝

深拷贝会将引用类型的值也拷贝一遍。这意味着如果数组中包含引用类型，则深拷贝后的新数组将拥有自己独立的引用类型值。修改新数组中的引用类型值不会影响到原数组中的值。

在 JavaScript 中，有以下几种方法可以实现数组的浅拷贝：

slice()
concat()
spread 运算符（...）
Array.from()

以下几种方法可以实现深拷贝：

for 循环
map()

以下是浅拷贝和深拷贝的一个示例：

const arr1 = [1, 2, { foo: 'bar' }];
const arr2 = arr1.slice(); // 浅拷贝

arr2[2].foo = 'baz';

console.log(arr1); // 输出：[1, 2, { foo: 'baz' }]
console.log(arr2); // 输出：[1, 2, { foo: 'baz' }]

在这个示例中，我们使用 slice() 方法对 arr1 进行了浅拷贝。修改 arr2 中引用类型的值 foo 后，arr1 中的 foo 值也受到了影响，这表明这两个数组共用同一内存位置。

以下是深拷贝的一个示例：

const arr1 = [1, 2, { foo: 'bar' }];
const arr2 = arr1.map(item => (typeof item === 'object' ? { ...item } : item));

arr2[2].foo = 'baz';

console.log(arr1); // 输出：[1, 2, { foo: 'bar' }]
console.log(arr2); // 输出：[1, 2, { foo: 'baz' }]