数组的分配和解包之间的区别

Question

所以我有这段JavaScript代码，Line A和Line B之间有什么区别

const arr1 = [1,2,3,4,5]

const arr2 = [...arr1]; // Line A
const arr2 = arr1;      // Line B

所以我想知道这两种赋值方式是相同的还是有一些区别

Answer 1

它们是不同的。

const arr2 = [...arr1]; // Line A

LINE A，将数组的每个元素复制（浅复制）到arr2中。

const arr2 = arr1;      // Line B

LINE B，将arr1的引用赋值给arr2。基本上，arr1和arr2是同一个数组。

示例

const arr = [1, 2, 3];

const arrA = [...arr];
const arrB = arr;

console.log(arr === arrA); // False
console.log(arr === arrB); // True

arrA[0] = 9;
console.log(arr[0] === arrA[0]); // False
console.log(arr); // [1,2,3]
console.log(arrA); // [9,2,3]

arrB[0] = 9;
console.log(arr[0] === arrB[0]); // True
console.log(arr); // [9,2,3]
console.log(arrB); // [9,2,3]

浅复制

浅复制只复制第一层项。例如，如果数组包含另一个数组，则内部数组会被复制，但不会复制内部数组的元素。因此，深层元素不会被复制。请参阅下面的代码示例：

const arr = [1, 2, [5, 6]];

const arrA = [...arr];
const arrB = arr;

console.log(arr === arrA); // False
console.log(arr === arrB); // True

arrA[0] = 8;
arrA[2][0] = 9;
console.log(arr[2][0] === arrA[2][0]); // True
console.log(arr); // [1, 2, [9, 6]]
console.log(arrA); // [8, 2, [9, 6]]

arrB[0] = 8;
arrB[2][0] = 9;
console.log(arr[2][0] === arrB[2][0]); // True
console.log(arr); // [8, 2, [9, 6]]
console.log(arrB); // [8, 2, [9, 6]]