Was ist der effizienteste Weg, um ein Objekt in JavaScript tief zu klonen?

Question 1

Was ist der effizienteste Weg, um ein JavaScript-Objekt zu klonen? Ich habe gesehen obj = eval(uneval(o)); verwendet, aber das ist kein Standard und wird nur von Firefox unterstützt.

Ich habe Dinge getan wie obj = JSON.parse(JSON.stringify(o)); aber die Effizienz in Frage stellen.

Ich habe auch rekursive Kopierfunktionen mit verschiedenen Fehlern gesehen.

Ich bin überrascht, dass es keine kanonische Lösung gibt.

Question 2

Sehen Sie sich diesen Benchmark an: http://jsben.ch/#/bWfk9

In meinen vorherigen Tests, bei denen Geschwindigkeit ein Hauptanliegen war, fand ich heraus

JSON.parse(JSON.stringify(obj))

um der langsamste Weg zu sein, ein Objekt tief zu klonen (es ist langsamer als jQuery.extend mit deep Flag um 10-20 % auf wahr gesetzt.

jQuery.extend ist ziemlich schnell, wenn die deep Flag ist gesetzt false (flacher Klon). Es ist eine gute Option, da es zusätzliche Logik für die Typvalidierung enthält und keine undefinierten Eigenschaften usw. kopiert, aber dies wird Sie auch ein wenig verlangsamen.

Wenn Sie die Struktur der Objekte kennen, die Sie klonen möchten, oder tief verschachtelte Arrays vermeiden können, können Sie eine einfache schreiben for (var i in obj) Schleife, um Ihr Objekt zu klonen, während hasOwnProperty überprüft wird, und es wird viel viel schneller als jQuery sein.

Wenn Sie schließlich versuchen, eine bekannte Objektstruktur in einer heißen Schleife zu klonen, können Sie VIEL MEHR LEISTUNG erzielen, indem Sie einfach die Klonprozedur einbetten und das Objekt manuell erstellen.

JavaScript-Trace-Engines sind bei der Optimierung schlecht for..in Schleifen und die Überprüfung von hasOwnProperty werden Sie ebenfalls verlangsamen. Manuelles Klonen, wenn Geschwindigkeit ein absolutes Muss ist.

var clonedObject = {
  knownProp: obj.knownProp,
  ..
}

Vorsicht bei der Verwendung von JSON.parse(JSON.stringify(obj)) Methode an Date Objekte – JSON.stringify(new Date()) gibt eine Zeichenfolgendarstellung des Datums im ISO-Format zurück, die JSON.parse() nicht zurückwandeln in a Date Objekt. Weitere Informationen finden Sie in dieser Antwort.

Beachten Sie außerdem, dass natives Klonen zumindest in Chrome 65 nicht der richtige Weg ist. Laut JSPerf ist das Durchführen des nativen Klonens durch Erstellen einer neuen Funktion fast 800x langsamer als die Verwendung von JSON.stringify, das auf ganzer Linie unglaublich schnell ist.

Update für ES6

Wenn Sie Javascript ES6 verwenden, versuchen Sie diese native Methode zum Klonen oder flachen Kopieren.

Object.assign({}, obj);

Question 3

Angenommen, Sie haben nur Eigenschaften und keine Funktionen in Ihrem Objekt, können Sie einfach Folgendes verwenden:

var newObject = JSON.parse(JSON.stringify(oldObject));

Question 4

Wenn es keine eingebaute gab, könnten Sie versuchen:

function clone(obj) {
    if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
        return obj;

    if (obj instanceof Date)
        var temp = new obj.constructor(); //or new Date(obj);
    else
        var temp = obj.constructor();

    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            obj['isActiveClone'] = null;
            temp[key] = clone(obj[key]);
            delete obj['isActiveClone'];
        }
    }
    return temp;
}

Question 5

Der effiziente Weg, ein Objekt in einer Codezeile zu klonen (nicht tief zu klonen).

Ein Object.assign -Methode ist Teil des ECMAScript 2015 (ES6)-Standards und macht genau das, was Sie brauchen.

var clone = Object.assign({}, obj);

Die Methode Object.assign() wird verwendet, um die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten auf ein Zielobjekt zu kopieren.

Die Polyfill um ältere Browser zu unterstützen:

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}