Une brève analyse de la copie profonde et de la copie superficielle dans js

Cet article vous apporte une brève analyse de la copie profonde et de la copie superficielle en js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

La copie approfondie et la copie superficielle sont en fait deux concepts relativement basiques, mais je souhaite quand même les trier car ils contiennent de nombreux petits détails très intéressants.

La différence entre la copie profonde et la copie superficielle

La copie profonde et la copie superficielle sont deux termes que tout le monde entend souvent. Quelle est la différence entre eux ?

Regardons d'abord ce qu'est une copie superficielle.

var obj1 = { a: 1, b: 2 };
var obj2 = obj1;
obj2.a = 3;

console.log(obj1); // { a: 3, b: 2 }
console.log(obj2); // { a: 3, b: 2 }

C'est l'exemple le plus simple de copie superficielle. J'ai attribué obj1 à obj2 et modifié une valeur d'attribut dans obj2. La valeur d'attribut correspondante dans obj1 a également changé. Pourquoi ?

Parce que une copie superficielle n'est en fait qu'une copie d'une référence, les deux pointent toujours vers la même adresse en mémoire . En bref, obj1 et obj2 pointent en réalité vers le même objet. Par exemple, c'est comme une pièce dont le numéro de maison 1 a été remplacé par le numéro de maison 2, mais cette pièce est toujours la même.

Ensuite, copie profonde signifie que les deux pointent vers des adresses mémoire différentes, ce qui est une copie au vrai sens du terme . Prenons l'exemple de la pièce ci-dessus, c'est-à-dire que vous avez réellement ouvert une nouvelle pièce, et pas seulement changé le numéro de la maison.

Parlez de Object.assign()

Object.assign() est une méthode que nous utilisons souvent. En fait, cette méthode est une copie superficielle. Mais il a quelque chose de spécial, c'est qu'il peut gérer des copies complètes de la première couche.

var obj1 = { a: 1, b: { c: 2 } };
var obj2 = Object.assign({}, obj1);
obj2.a = 3;
obj2.b.c = 3;
console.log(obj1); // { a: 1, b: { c: 3 } }
console.log(obj2); // { a: 3, b: { c: 3 } }

En regardant l'exemple ci-dessus, la valeur de l'attribut a ne change pas, mais la valeur de c dans l'attribut b change.

Moyens couramment utilisés pour implémenter la copie approfondie

JSON

C'est le moyen le plus couramment utilisé pour implémenter la copie approfondie, il suffit de regarder l'exemple :

var obj1 = { a: { b: 1 } };
var obj2 = JSON.parse(JSON.stringify(obj1));

Cette méthode est simple et facile à utiliser, mais elle présente un léger défaut dans la mesure où elle ignore le constructeur de l'objet. C'est-à-dire qu'après une copie profonde, quel que soit le constructeur d'origine de l'objet, il deviendra Objet après une copie profonde.

Et les seuls objets que cette méthode peut gérer correctement sont Number, String, Boolean et Array, c'est-à-dire les structures de données qui peuvent être directement représentées par JSON. Les objets ou fonctions RegExp ne peuvent pas être copiés en profondeur de cette manière.

lodash

C'est la méthode que j'utilise actuellement. Il suffit d'une seule ligne de var obj2 = _.cloneDeep(obj1) pour y parvenir. De plus, lodash est une bibliothèque très puissante et les méthodes fournies sont fiables et simples. C'est vraiment un incontournable pour les paresseux.

.

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!