Analyse von Codebeispielen zum Kopieren von JavaScript-Arrays und -Objekten

In diesem Artikel werden hauptsächlich die relevanten Kenntnisse zum Kopieren von JavaScript-Arrays und Objekten vorgestellt. Hat einen sehr guten Referenzwert. Werfen wir einen Blick darauf mit dem Editor unten

1 Datentyp

Im engeren Sinne JS Alle Daten sind in zwei Haupttypen unterteilt: Basistypen und Referenztypen. Zu den Basistypen gehören Undefiniert, Null, Boolean, Zahl und String. Der Referenztyp ist Objekt Verwendetes Array, Datum, RegExp, Funktion usw. gehören alle zum Typ Objektklasse.

Einer der Unterschiede zwischen Basisdaten und Referenzdaten besteht darin, dass beim Kopieren einer Variablen die Basisdaten eine unabhängige neue Kopie kopieren, während die Referenzdaten einen Verweis auf die Originalvariable kopieren. Hier ist ein Beispiel:

// 基本类型数据的复制
var a = 10;
var b = a; // b = 10
a = 20; // a = 20, b = 10
// 引用类型数据的复制
var m = [1, 2];
var n = m;
m[0] = 10;
console.log(n[0]); // 10

Wenn ich den Wert des Referenztyps selbst anstelle der Referenz kopieren möchte, kann die obige Methode offensichtlich nicht verwendet werden.

2. Flache Kopie des Arrays

Flache Kopie bedeutet, dass beim Kopieren eines Objekts (Arrays) der Wert seines Referenzfelds nicht kopiert, sondern kopiert wird Ein Verweis auf das entsprechende Feld. Beispiel:

var src = [
 'alpha',
 ['bravo', 'chalie']
];
var dest = [];
for (var i = 0; i < src.length; i++) {
 dest[i] = src[i];
}
//此时，如果改变src中的引用字段，dest中相应的字段也会被改变
src[1].push(&#39;delta&#39;);
console.log(dest[1]); // [&#39;bravo&#39;, &#39;chalie&#39;, &#39;delta&#39;]

Flache Kopie wird im Allgemeinen für eindimensionale Arrays verwendet, d. h. wenn das Array keinen Referenztyp enthält. Häufig verwendete flache Kopiermethoden sind:

Concat-Methode

 var src = ['alpha', 'bravo'],
  dest = [];
 dest = dest.concat(src);

Concat-Methode wird häufiger beim Zusammenführen von Arrays verwendet, wie zum Beispiel:

 var a = ['alpha', 'bravo'],
  b = ['chalie', 'delta'],
  combine;
 combine = a.concat(b);

Es sollte insbesondere darauf hingewiesen werden, dass bei der Verwendung von concat zum Zusammenführen von Arrays alle Elemente in zwei (oder mehr) Arrays in ein neues Objekt kopiert werden. Bei großen Arrays ist der Overhead relativ hoch. Eine bessere Möglichkeit besteht darin, die Elemente des letzteren Arrays in das vorherige Array zu kopieren:

 var src = ['alpha', 'bravo'],
  dest = ['chalie', 'delta'];
 Array.prototype.push.apply(src, dest);

Slice-Methode

Slice-Methode kann zurückgegeben werden ausgewählte Elemente aus einem vorhandenen Array und gibt ein neues Array zurück.

 var src = ['alpha', 'bravo'],
 var dest = src.slice(0);

3. Flaches Kopieren von Objekten

Ein flaches Kopieren von Objekten kann mithilfe der For-In-Traversierung erreicht werden, und ein bequemeres Objekt wird in es6 bereitgestellt. Methode „assign()“.

 var src = {name: 'fox', age: 20},
  dest = null;
 dest = Object.assign({}, src);

Sie können auch $.extend in jQuery, _.extend im Unterstrich usw. verwenden, um Objekte zu kopieren.

4. Tiefe Kopie

Flache Kopie hat begrenzte Anwendungsszenarien. In weiteren Fällen hoffen wir, das Objekt in eine vollständige Kopie zu kopieren die Verwendung von Typeof- oder Instantof-Operatoren, um den Typ jedes Felds zu bestimmen. Wenn ein Feld vom Basistyp ist, kann es direkt kopiert werden. Wenn ein Feld vom Referenztyp ist, muss die obige Beurteilung für alle Felder des Feldes getroffen werden, was es uns leicht macht, die Verwendung von Rekursion zur Implementierung dieser Funktion in Betracht zu ziehen.

function deep_copy(src, dest) {
 for (var p in src) {
  if (Array.isArray(src[p]) || src[p] instanceof Object) {
   dest[p] = Array.isArray(src[p]) ? [] : {};
   arguments.callee(dest[p], src[p]);
  }else {
   dest[p] = src[p];
  }
 }
}

Da Arrays im obigen Code spezielle Objekte sind, können sie mit for-in durchlaufen werden.

Darüber hinaus können Sie auch die

json-Methode verwenden:

 function deep_copy_in_json(src) {
  return JSON.parse(JSON.stringify(src));
 }

Obwohl dies einfacher ist, werden viele

Attribute des Originalobjekts dies tun Gehen nach der Operation verloren, z. B. Konstruktoreigenschaften und einige Methoden im Objektprototyp.

Das obige ist der detaillierte Inhalt vonAnalyse von Codebeispielen zum Kopieren von JavaScript-Arrays und -Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!