Tutoriel sur la copie superficielle et la copie profonde des tableaux et objets JS

Co-encourager~

Dans de nombreux langages de programmation, la transmission des paramètres et l'attribution de valeurs s'effectuent par copie directe des valeurs ou par copie par référence. En JavaScript, il n'y a pas de différence de syntaxe entre le fait qu'une valeur soit copiée directement ou par référence. Elle est entièrement déterminée en fonction du type de la valeur.

En JavaScript, les valeurs simples sont toujours passées par affectation par copie directe de la valeur (nulle, non définie, chaîne, nombre, booléen, symbole), tandis que les valeurs composées (objets (y compris tableaux) etc.) et fonctions) sont toujours attribués et transmis par copie de référence.

L'exemple suivant peut approfondir la compréhension :

var a = 1;var b = a;
b++;
a; //1b; //2var c = [1,2];var d = c;
d.push(3);
c; //[1,2,3]d; //[1,2,3]

Copie superficielle du tableau

L'opération d'affectation du tableau dans l'exemple ci-dessus est une copie superficielle du tableau. Il n'est pas difficile de trouver le problème. Lorsqu'un tableau change, les autres tableaux attribués changent également. Dans de nombreuses situations telles que la sauvegarde, cela change. n'est pas le résultat que nous souhaitons.

var c = [1,2];var d = c;
d.push(3);
c; //[1,2,3]d; //[1,2,3]

Copie approfondie du tableau

Nous pouvons implémenter la copie approfondie du tableau de deux manières :

var a = [1,2,3];var b = a.slice(0);var c = a.concat();

b.push(4);

c.push(5);

a; //[1,2,3]b; //[1,2,3,4]c; //[1,2,3,5]

Copie superficielle d'un objet

Relativement parlant, la copie d'un tableau est relativement simple, et la copie superficielle d'un objet peut également être facilement implémentée :

function easyClone(Obj) {var objNew = {};for ( var i in Obj) {
        objNew[i] = Obj[i];
    }return objNew;
}

Dans En fait, il s'agit de copier les propriétés et les valeurs de chaque objet d'origine dans le nouvel objet. Bien sûr, nous pouvons également utiliser la méthode Object.assign() pour copier n'importe quel nombre de propriétés énumérables de l'objet source dans l'objet cible, puis renvoie l'objet cible. En même temps, Object.assign() est également une copie superficielle. Les étudiants intéressés peuvent y jeter un œil.

La copie superficielle ne vérifie pas de manière récursive si chaque valeur de l'objet est un objet, mais attribue directement la valeur, donc si une certaine valeur est un objet, des problèmes surviendront, donc en général nous avons besoin d'utiliser la copie approfondie pour sauvegarde.

Copie profonde de l'objet

La copie profonde la plus simple :

b = JSON.parse( JSON.stringify(a) )

Limitations :

• Impossible de copier la fonction

• La chaîne de prototypes a disparu, l'objet est un objet et la classe à laquelle il appartient a disparu.

En fait, une simple copie profonde nous oblige seulement à appeler récursivement une copie superficielle :

function deepCopy(obj) {
　　var objNew = objNew || {};
　　for (var i in obj) {
　　　　if (typeof p[i] === 'object') {
　　　　　　objNew[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　deepCopy(obj[i], objNew[i]);
　　　　} else {
　　　　　　　objNew[i] = obj[i];
　　　　}
　　}
　　return objNew;
}

Bien sûr, la méthode jQuery.extend() de JQ peut également effectuer une copie profonde et une copie superficielle : Pour plus de détails, veuillez vous référer à cet article :

Analyse de copie superficielle et de copie profonde $.extend dans jQuery

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!