Quelle est la différence entre la copie profonde javascript et la copie superficielle

En JavaScript, une copie superficielle copie uniquement l'adresse mémoire des données d'origine, ce qui équivaut à deux pointeurs de données pointant vers la même adresse. Si un élément de données change, cela affectera l'autre tandis que les deux points de données de. la copie complète pointe vers la même adresse. Différentes adresses, si un élément change, cela n'affectera pas l'autre.

L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.

Quelle est la différence entre la copie profonde et la copie superficielle en JavaScript ?

Avant d'explorer la copie superficielle et la copie profonde, comprenons d'abord les concepts de tas et de pile

Le tas et la pile sont deux zones divisées en mémoire pour le stockage. La pile se voit automatiquement allouer de l'espace mémoire, qui est automatiquement libéré par le système ; le tas est de la mémoire allouée dynamiquement, et sa taille est variable et ne sera pas automatiquement libérée.

Ensuite, examinons les types de données de base et les types de données de référence (également appelés types de données complexes)

1. Types de base : chaîne, nombre, booléen, nul, non défini, symbole (nouveau dans ES6, représentant des valeurs de base uniques) ; types La valeur occupe une taille fixe en mémoire et est stockée dans la mémoire de pile.

2. Types de référence : Objet, Tableau, Date, Fonction, etc. ; la valeur du type de référence est un objet et est stockée dans la mémoire tas.

Le concept de copie sombre et superficielle

Remarque : La différence entre la copie sombre et superficielle s'applique uniquement aux objets complexes tels que Tableau et Objet.

1. Copie superficielle : elle copie uniquement l'adresse mémoire des données d'origine, ce qui équivaut à deux pointeurs de données pointant vers la même adresse. Les modifications apportées à l'un des éléments de données affecteront l'autre.

2. Copie profonde : les deux données pointent vers des adresses différentes et les éléments de données ne s'affecteront pas lorsqu'ils changeront.

Exemple d'étude

1. Copie superficielle

var arr = [0, 1, 2];
var arrB;
 
//把arr赋值给arrB
arrB = arr;
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

Résultats de fonctionnement : les éléments du tableau arr changent à mesure que les éléments du tableau arrB changent

2. Copie profonde (seule la première couche de copie profonde est effectuée)

Remarque : lors de l'utilisation de la copie profonde. Ce faisant, vous devez clarifier les exigences pour la copie complète. S'agit-il uniquement d'une copie complète des attributs d'objet ou des éléments du tableau de premier niveau, ou d'une copie récursive de tous les niveaux des attributs d'objet et des éléments du tableau ?

Tableau de copie profonde

①. Traversée directe

var arr = [1, 2, 3, 4];
function copy(arr){
    var newArr = [];
    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]);
    }
    return newArr;
}
 
var arrB = copy(arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

Résultat d'exécution : le changement de l'élément du tableau arrB n'affecte pas la valeur de l'élément du tableau arr

② : utilisé pour connecter deux tableaux ou plus. Cette méthode ne modifie pas le tableau existant, elle renvoie simplement une copie du tableau concaténé.

var arr = [0, 1, 2];
var arrB;
 
//把arr赋值给arrB
arrB = arr.concat();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

Résultat d'exécution : Les éléments du tableau arr n'ont pas changé avec les changements des éléments du tableau arrB

③ slice() : Cette méthode renvoie une partie des fragments d'éléments interceptés du tableau existant pour former un. nouveau tableau (le tableau d'origine n'est pas modifié) .

var arr = [0, 1, 2, 4, 5];
var arrB;
 
//把arr赋值给arrB
arrB = arr.slice();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 10;
arr[4] = 8;
console.log("arr:", arr);
console.log("arrB:", arrB);

Résultats d'exécution : les modifications apportées aux éléments du tableau ne s'affecteront pas les unes les autres

Les trois méthodes ci-dessus ne conviennent qu'aux tableaux simples où les éléments du tableau sont des types de données de base, et aux tableaux où les éléments du tableau de premier niveau sont variables de type référence telles que des objets ou des tableaux De manière générale, toutes les méthodes ci-dessus seront inefficaces.

Recommandations associées : Tutoriel d'apprentissage Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!