Différence entre l'allocation et le déballage des tableaux

Question

J'ai donc ce code JavaScript, quelle est la différence entre la ligne A et la ligne B

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

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

Je veux donc savoir si ces deux méthodes d'affectation sont identiques ou s'il existe des différences

Answer 1

Ils sont différents.

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

LINE A, copie (copie superficielle) chaque élément du tableau dans arr2.

const arr2 = arr1;      // Line B

LINE B, attribuez la référence de arr1 à arr1的引用赋值给arr2。基本上，arr1和arr2. Fondamentalement, arr1 et

sont le même tableau.

Exemple

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]

Copie superficielle

La copie superficielle copie uniquement les éléments de premier niveau. Par exemple, si un tableau contient un autre tableau, le tableau interne est copié, mais les éléments du tableau interne ne sont pas copiés. Les éléments profonds ne sont donc pas copiés. Voir l'exemple de code ci-dessous : 🎜

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]]