Anwendung von Immutable in JavaScript_Javascript-Fähigkeiten

Veränderliches Objekt
In JavaScript handelt es sich bei Objekten um Referenztypdaten. Der Vorteil besteht darin, dass Objekte, die häufig geändert werden, auf der Grundlage des ursprünglichen Objekts geändert werden und nicht neu erstellt werden müssen. Dies kann den Speicher effektiv nutzen und verursacht keine Speicherverschwendung Raum. Diese Funktion kann als veränderlich bezeichnet werden, was auf Chinesisch wörtlich „Variable“ bedeutet.
Bei veränderlichen Objekten können die Vorteile, flexibel und veränderbar zu sein, manchmal zu ihren Nachteilen werden. Je flexibler und veränderlicher die Daten sind, desto schwieriger ist es, sie zu kontrollieren. Wenn das Objekt in mehreren Bereichen verwendet wird, ist es schwierig vorherzusagen, ob und wann sich die Daten ändern werden.

var obj = { /* 一个复杂结构的对象 */ };
doSomething(obj);
// 上面的函数之行完后，此时的 obj 还是最初的那个 obj 吗？

Um dieses Problem zu lösen, besteht die herkömmliche Lösung darin, das Objekt in Form einer tiefen Kopie in ein neues Objekt zu kopieren und dann Änderungsvorgänge für das neue Objekt durchzuführen. Dies kann die Kontrollierbarkeit der Daten gewährleisten, jedoch häufiges Kopieren kann zu einer großen Verschwendung von Speicherplatz führen.

var obj = { /* 一个复杂结构的对象 */ };
// copy 出一个新的 obj2
// 但是 copy 操作会浪费内存空间
var obj2 = deepClone(obj);
doSomething(obj2);
// 上面的函数之行完后，无论 obj2 是否变化，obj 肯定还是原来那个 obj

Unveränderliches Objekt
Um die oben genannten Probleme besser zu lösen, wurde das Immutable-Objekt eingeführt, das wörtlich als „unveränderlich“ übersetzt wird. Jedes Mal, wenn ein unveränderliches Objekt geändert wird, wird ein neues unveränderliches Objekt erstellt, und Vorgänge am neuen Objekt haben keinen Einfluss auf die Daten des ursprünglichen Objekts. Dieses spezielle Objekt ist keine neue Funktion von JavaScript, sondern eine Reihe von Lösungen, die von der Industrie zur Lösung dieses Problems bereitgestellt werden. Es sind einige hervorragende Open-Source-Bibliotheken entstanden, von denen die bekannteste Lee Byron Open Source immutable von Facebook ist. js. Natürlich ist die Lösung von Immutable nicht originell, sondern stammt von Clojure und Scala.
Leistungsvergleich zwischen veränderlich und unveränderlich
Die ineffizienten Operationen an veränderlichen Objekten spiegeln sich hauptsächlich im Kopieren und Vergleichen wider, und unveränderliche Objekte lösen diese beiden ineffizienten Schwachstellen.
Der Deep-Copy-Vorgang eines gewöhnlichen veränderlichen Objekts kopiert die gesamten Daten, aber das unveränderliche Objekt kopiert beim Ändern der Daten nicht die gesamten Daten, sondern überträgt die Eltern-Kind-Beziehung zwischen dem geänderten Knoten und dem unveränderten Knoten auf einen neuen Knoten, eine Struktur ähnlich einer verknüpften Liste. Unter dem Gesichtspunkt des „Kopierens“ wird ein minimales Kopieren erreicht, und die veränderlichen Kopien werden „vollständig“ geteilt, während unveränderliche Kopien „inkrementiert“ werden. Die Beurteilung erfolgt auf der Grundlage des Vergleichs Tarife.
Und basierend auf der Funktion, dass jedes Mal, wenn ein unveränderliches Objekt geändert wird, ein neues unveränderliches Objekt erstellt wird, kann der Änderungsstatus der Daten als Satz von Schnappschüssen gespeichert werden, was ebenfalls sehr praktisch ist.
Lassen Sie uns über Vergleichsoperationen sprechen. Wenn Sie bei veränderlichen Objekten vergleichen möchten, ob zwei Objekte gleich sind, müssen Sie zum Vergleich jeden Knoten des Objekts durchlaufen. Bei Objekten mit komplexen Strukturen ist die Effizienz definitiv nicht viel höher. Für unveränderliche Objekte stellt immutable.js eine API bereit, um direkt zu bestimmen, ob die „Werte“ zweier unveränderlicher Objekte gleich sind.

var map1 = Immutable.Map({a:1, b:1, c:1});
var map2 = Immutable.Map({a:1, b:1, c:1});
assert(map1 !== map2); // 不同的 Immutable 实例，此时比较的是引用地址
assert(Immutable.is(map1, map2)); // map1 和 map2 的值相等，比较的是值
assert(map1.equals(map2)); // 与 Immutable.is 的作用一样

In tatsächlichen Entwicklungsanwendungen ist die Leistung nicht immer das Wichtigste und Wichtigste. Für gewöhnliche JavaScript-Projekte ist die Steuerbarkeit der Daten durch die Eigenschaften von Immutable vorteilhafter. Veränderbare Objekte eignen sich für die Verwendung in einem kleinen Bereich von geschlossenen Bereichen, während unveränderliche Objekte für den Einsatz geeignet sind, wenn Daten über mehrere Bereiche hinweg übergeben werden müssen.

Der Unterschied in der Verwendung zwischen veränderlich und unveränderlich

immutable.js bietet eine Vielzahl unveränderlicher Datenstrukturen: einschließlich List Stack Map OrderedMap Set OrderedSet Record. Diese Datenstrukturen entsprechen in etwa den nativen veränderlichen Datenstrukturen.
Die Verwendung jeder Datenstruktur wird hier nicht im Detail erläutert. Lassen Sie uns hauptsächlich über den Unterschied in der Verwendung zwischen unveränderlichen Objekten und veränderlichen Objekten sprechen.
Native veränderbare Objekte eignen sich sehr gut zum „Lesen“ und „Schreiben“.

var mutableObj = {};
// 写入数据
mutableObj.foo = 'bar';
// 读取数据
console.log(mutableObj.foo);

Das unveränderliche Objekt muss Daten über Set und Get „lesen“ und „schreiben“.

var immutableObj1 = Immutable.Map();
// 写入数据
var immutableObj2 = immutableObj1.set('foo', 'bar');
// 读取数据
console.log(immutableObj2.get('foo')); // => 'bar'

Das obige Beispiel erstellt zu Beginn nur ein leeres Objekt, um die Verwendung der Set-Methode zu veranschaulichen. Tatsächlich kann der Anfangswert während der Instanziierung übergeben werden.

var immutableObj = Immutable.Map({'foo', 'bar'});

Für Deep-Level-Daten ist die von immutable.js bereitgestellte Zugriffsschnittstelle sehr praktisch.

var immutableObj1 = Immutable.fromJS({
 a: {
  b: 'c'
 },
 d: [1, 2, 3]
});
// 读取深层级的数据
console.log(immutableObj1.getIn(['a', 'b'])); // => 'c'
console.log(immutableObj1.getIn(['d', 1])); // => 2
// 修改深层级的数据
var immutableObj2 = immutableObj1.setIn(['a', 'b'], 'd');
console.log(immutableObj2.getIn(['a', 'b'])); // => 'd'

Wenn es sich um ein natives veränderliches Objekt handelt, kann beim Verketten des Zugriffs auf Daten auf tiefer Ebene ein Objektfehler gemeldet werden. Das unveränderliche Objekt meldet jedoch keinen Fehler und gibt undefiniert zurück.
Wenn Sie beim Debuggen die interne Struktur eines unveränderlichen Objekts anzeigen möchten, wird empfohlen, es zunächst mit toJSON () in ein gewöhnliches veränderliches Objekt zu konvertieren.