Heim > Web-Frontend > js-Tutorial > Hauptteil

Tutorial zum flachen Kopieren und tiefen Kopieren von JS-Arrays und -Objekten

巴扎黑
Freigeben: 2017-06-26 15:03:28
Original
1352 Leute haben es durchsucht

Co-ermutigen~

In vielen Programmiersprachen erfolgt die Übergabe von Parametern und die Zuweisung von Werten durch direktes Kopieren von Werten oder Kopieren durch Referenz. In JavaScript gibt es keinen Unterschied in der Syntax, ob ein Wert direkt oder per Referenz kopiert wird. Dies hängt ausschließlich vom Typ des Werts ab.

In JavaScript werden einfache Werte immer durch Zuweisung durch direktes Kopieren des Werts (Null, undefiniert, Zeichenfolge, Zahl, Boolescher Wert, Symbol) übergeben, während zusammengesetzte Werte (Objekte (einschließlich (Arrays) usw.) und Funktionen) werden immer durch Referenzkopie zugewiesen und übergeben.

Das folgende Beispiel kann das Verständnis vertiefen:

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]
Nach dem Login kopieren

Flache Kopie des Arrays

Die Zuweisungsoperation des Arrays im obigen Beispiel ist eine flache Kopie des Arrays. Wenn sich ein Array ändert, ändern sich auch andere zugewiesene Arrays ist nicht das, was wir wollen.

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

Tiefe Kopie des Arrays

Wir können eine tiefe Kopie des Arrays auf zwei Arten implementieren:

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]
Nach dem Login kopieren

Flache Kopie des Objekts

Relativ gesehen ist die Kopie des Arrays relativ einfach, und die flache Kopie des Objekts kann auch leicht implementiert werden:

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

In Tatsächlich ist es Kopieren Sie die Eigenschaften und Werte jedes Originalobjekts in das neue Objekt. Natürlich können wir auch die Methode Object.assign() verwenden, um eine beliebige Anzahl der aufzählbaren Eigenschaften des Quellobjekts in das Zielobjekt zu kopieren. und dann das Zielobjekt zurückgeben. Gleichzeitig ist Object.assign() auch eine flache Kopie. Interessierte Schüler können einen Blick darauf werfen.

Flache Kopie prüft nicht rekursiv, ob jeder Wert des Objekts ein Objekt ist, sondern weist den Wert direkt zu. Wenn also ein bestimmter Wert ein Objekt ist, treten Probleme auf. Daher müssen wir im Allgemeinen eine tiefe Kopie verwenden Sicherung.

Tiefe Kopie des Objekts

Die einfachste tiefe Kopie:

b = JSON.parse( JSON.stringify(a) )
Nach dem Login kopieren

Einschränkungen:

  • Funktion kann nicht kopiert werden

  • Die Prototypenkette ist verschwunden, das Objekt ist ein Objekt und die Klasse, zu der es gehört, ist verschwunden.

Tatsächlich erfordert eine einfache tiefe Kopie nur, dass wir eine flache Kopie rekursiv aufrufen:

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;
}
Nach dem Login kopieren

Von Natürlich kann die jQuery.extend()-Methode von JQ auch Deep Copy und Shallow Copy durchführen: Weitere Informationen finden Sie in diesem Artikel:

Shallow Copy und Deep Copy $.extend-Analyse in jQuery

Das obige ist der detaillierte Inhalt vonTutorial zum flachen Kopieren und tiefen Kopieren von JS-Arrays und -Objekten. 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