Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Einführung in Deep Copy und Shallow Copy in js (Code-Analyse)

不言
Freigeben: 2018-08-14 11:25:28
Original
997 Leute haben es durchsucht

Der Inhalt dieses Artikels ist eine detaillierte Einführung (Code-Analyse) über Deep Copy und Shallow Copy. Ich hoffe, dass er für Sie hilfreich ist.

Basistypen und Referenztypen

Datentypen in ECMAScript können in zwei Typen unterteilt werden:

Basic Typ: undefiniert, null, boolesch, Zeichenfolge, Zahl, Symbol
Referenztyp: Objekt, Array, Datum, Funktion, RegExp usw.

Unterschiedlich Typen Speichermethode:

Basistyp : Der Basistypwert belegt eine feste Größe im Speicher und wird im Stapelspeicher gespeichert
Referenztyp : Referenz Typ Der Wert ist ein Objekt, das im Heap-Speicher gespeichert wird, während der Stapelspeicher die Variablenkennung des Objekts und die Speicheradresse des Objekts im Heap-Speicher speichert

Verschiedene Arten von Kopien Methoden:

Basistyp

  • Basistyp: Durch das Kopieren eines Basistypwerts von einer Variablen in eine andere neue Variable wird eine Kopie erstellt des Werts. Und kopieren Sie die Kopie in die neue Variable

let foo = 1;
let bar = foo;
console.log(foo === bar); // -> true

// 修改foo变量的值并不会影响bar变量的值
let foo = 233;
console.log(foo); // -> 233
console.log(bar); // -> 1
Nach dem Login kopieren
  • Referenztyp: Kopieren Sie den Wert des Referenztyps von einer Variablen in eine andere neue Variable Tatsächlich wird der Zeiger kopiert. Am Ende zeigen beide Variablen auf dasselbe Objekt 🎜>

    Flache Kopie
  • : Es werden nur Referenzen kopiert, und Vorgänge untereinander wirken sich gegenseitig aus.

  • Tiefe Kopie

    : Speicher neu zuweisen im Heap, unterschiedliche Adressen, der gleiche Wert, gegenseitig Hat keinen Einfluss auf

  • Flache Kopie

    Geben Sie ein Beispiel ()

    let foo = {
      name: 'leeper',
      age: 20
    }
    let bar = foo;
    console.log(foo === bar); // -> true
    
    // 改变foo变量的值会影响bar变量的值
    foo.age = 19;
    console.log(foo); // -> {name: 'leeper', age: 19}
    console.log(bar); // -> {name: 'leeper', age: 19}
    Nach dem Login kopieren

Deep copy

  var me = {
      name: 'zjj',
      age: 19,
      address: {
          home: 'tianjin'
      }
  };
  
  var me_1 = {
      m_token: 'new'
  };
  
  
  function extend(p, c){
      var c = c || {};
      
      for(var i in p) {
          c[i] = p[i];
      }
  }
  extend(me,me_1);
Nach dem Login kopieren
Detaillierte Einführung in Deep Copy und Shallow Copy in js (Code-Analyse)

JSON.parse() und JSON.stringify()

Detaillierte Einführung in Deep Copy und Shallow Copy in js (Code-Analyse)JSON.stringify(): Serialisieren Sie ein js-Objekt in einen JSON-String

JSON.parse(): Deserialisieren Sie einen JSON-String in ein js-Objekt
      var me = {
          name: 'zjj',
          age: 19,
          address: {
              home: 'tianjin'
          }
      };
      
      var me_1 = {
          m_token: 'new'
      };
      
      
      function extend(p, c){
          var c = c || {};
          
          for(var i in p) {
              c[i] = p[i];
          }
      }
    
    
      function extendDeeply(p, c) {
        var c = c || {};
          
          for(var i in p) {
            if(typeof p[i] === 'object') {
              // 引用类型需要递归实现深拷贝
              c[i] = (p[i].constructor === Array ) ? [] : {}
              extendDeeply(p[i], c[i]);
            } else {
              // 非引用类型直接复制即可
              c[i] = p[i];
            } 
          }
      }
      extendDeeply(me,me_1);
    Nach dem Login kopieren
  • Zusammenfassend sind JSON.parse() und JSON.stringify() vollständige tiefe Kopien.

  • Praktische Implementierung von Deep Copy Verwenden Sie [Rekursion], um Deep Copy eines Objekts oder Arrays zu implementieren. Rekursive Idee: Durchlaufen Sie alle Referenztypwerte im Attribut, bis es sich um einen Basistypwert handelt.
    let obj = {
      name: 'leeper',
      age: 20,
      friend: {
        name: 'lee',
        age: 19
      }
    };
    let copyObj = JSON.parse(JSON.stringify(obj));
    obj.name = 'Sandman';
    obj.friend.name = 'Jerry';
    console.log(obj);
    // -> {name: "Sandman", age: 20, friend: {age: 19,name: 'Jerry'}}
    console.log(copyObj);
    // -> {name: "leeper", age: 20, friend: {age: 19,name: 'lee'}}
    Nach dem Login kopieren

    Die Kopiermethode ist eigentlich eine Vererbungsmethode. Natürlich gibt es auch andere Vererbungsmethoden!

    Verwandte Empfehlungen:

    Eine kurze Einführung in Shallow Copy und Deep Copy in js und ihre Implementierungsmethoden

    Was ist das Konzept von js-Ausführungsmechanismus? Implementierungsmethode des js-Ausführungsmechanismus

    Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Deep Copy und Shallow Copy in js (Code-Analyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage