Maison >interface Web >Questions et réponses frontales >Quelles sont les différentes méthodes de mise en œuvre de la copie profonde es6 ?

Quelles sont les différentes méthodes de mise en œuvre de la copie profonde es6 ?

青灯夜游
青灯夜游original
2022-03-23 12:06:527013parcourir

Comment implémenter la copie complète : 1. Utilisez l'instruction "Object.assign({},obj)" pour implémenter ; 2. Utilisez l'instruction "JSON.parse(JSON.stringify(obj))" pour implémenter ; Utilisez l'instruction " $.extend(true,[],arr)" pour y parvenir.

Quelles sont les différentes méthodes de mise en œuvre de la copie profonde es6 ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Qu'est-ce que la copie profonde

La copie profonde est relative à la copie superficielle. La principale différence se reflète dans le type de référence. Essentiellement, la copie superficielle copie simplement les références dans la pile, donc quand. vous modifiez la valeur nouvellement copiée, l'objet copié sera également modifié par vous ; et la copie profonde créera de l'espace pour le nouvel objet dans la mémoire tas, donc l'objet copié ne sera pas modifié sans raison.

Comment implémenter la copie approfondie dans es6

Méthode 1 : utilisez Object.assignObject.assign

Object.assign默认是对对象进行深拷贝的,但是我们需要注意的是,它只对最外层的进行深拷贝,也就是当对象内嵌套有对象的时候,被嵌套的对象进行的还是浅拷贝;

function cloneDeepAssign(obj){
  return Object.assign({},obj)
}

(温馨提示:数组拷贝方法当中,使用...sliceconcat等进行拷贝也是一样的效果,只深拷贝最外层)

同时,我们知道Object.assign针对的是对象自身可枚举的属性,对于不可枚举的没有效果;

所以,当我们对于一个层次单一对象的时候,可以考虑这种方法,简单快捷。(试过了,也不支持undefined)

方法2:利用JSON

这是我们最最最常提到的一种深拷贝的方式,一般大部分的深拷贝都可以用JSON的方式进行解决,本质是因为JSON会自己去构建新的内存来存放新对象。

function cloneDeepJson(obj){
  return JSON.parse(JSON.stringify(obj))
}

但是我们要注意的是:

  • 会忽略 undefinedsymbol

  • 不可以对Function进行拷贝,因为JSON格式字符串不支持Function,在序列化的时候会自动删除;

  • 诸如 MapSetRegExpDateArrayBuffer 和其他内置类型在进行序列化时会丢失;

  • 不支持循环引用对象的拷贝;(循环引用的可以大概地理解为一个对象里面的某一个属性的值是它自己)

方法3:利用jQuery的$.extend()

Object.assign par défaut pour la copie approfondie des objets, mais à quoi nous devons faire attention à is , il effectue uniquement une copie approfondie sur le calque le plus externe, c'est-à-dire que lorsqu'il y a des objets imbriqués dans l'objet, l'objet imbriqué effectue toujours une copie superficielle

var array = [1,2,3,4];
var newArray = $.extend(true,[],array);

(Rappel chaleureux : dans la méthode de copie de tableau, utilisez ..., slice, concat, etc. ont le même effet, seule la couche la plus externe est copiée en profondeur)

En même temps, nous savons que Object.assign cible les propriétés énumérables de l'objet lui-même, et n'a aucun effet sur les propriétés non énumérables Ainsi, lorsque nous traitons d'un seul objet à un niveau, nous pouvons considérer ; cette méthode, qui est simple et rapide. (Je l'ai essayé, non défini n'est pas pris en charge non plus)

🎜Méthode 2 : Utilisation de JSON🎜🎜🎜Il s'agit de la méthode de copie profonde la plus couramment mentionnée, généralement la plupart des copies profondes peuvent être résolues en utilisant JSON. l'essentiel est que JSON construira lui-même une nouvelle mémoire pour stocker de nouveaux objets. 🎜rrreee🎜Mais ce à quoi nous devons faire attention, c'est : 🎜
  • 🎜 ignorera undefined et symbole code>; 🎜
  • 🎜Vous ne pouvez pas copier Fonction car la chaîne de format JSON ne prend pas en charge Fonction pendant la sérialisation. sera automatiquement supprimé le moment venu ; 🎜
  • 🎜Tels que Map, Set, RegExp, Date , ArrayBuffer et d'autres types intégrés seront perdus lors de la sérialisation ; 🎜
  • 🎜 ne prend pas en charge la copie d'objets de référence circulaires (les références circulaires peuvent être grossièrement ; compris comme à l'intérieur d'un objet (La valeur d'un certain attribut est lui-même)🎜
🎜🎜Méthode 3 : Utilisez le $.extend() de jQuery🎜🎜rrreee🎜Évidemment, le plus grand L'inconvénient est que nous devons également présenter la bibliothèque jQuery, elle n'est donc pas couramment utilisée 🎜🎜[Recommandations associées : 🎜tutoriel vidéo javascript🎜, 🎜front-end web🎜]🎜 ;

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn