Heim >Web-Frontend >js-Tutorial >Unveränderlichkeit in JavaScript

Unveränderlichkeit in JavaScript

William Shakespeare
William ShakespeareOriginal
2025-02-20 11:59:11434Durchsuche

Immutability in JavaScript

Unveränderlichkeit: Ein Eckpfeiler der funktionellen Programmierung, das auch den objektorientierten Programmierungen erhebliche Vorteile bietet. In diesem Artikel wird die Unveränderlichkeit in JavaScript untersucht und seine Implementierung und Vorteile beschrieben.

Schlüsselkonzepte:

  • Unveränderlichkeit: Nach dem Erstellen bleibt der Zustand eines unveränderlichen Objekts unverändert. Dies steht im Gegensatz zu veränderlichen Objekten, deren Zustand geändert werden kann. In JavaScript sind Primitive wie Zeichenfolgen und Zahlen unveränderlich, während Arrays und Objekte veränderlich sind.
  • unveränderliche Datenstrukturen: Unveränderlichkeit mit Arrays und Objekten erfordert das Erstellen neuer Instanzen bei der Änderung, anstatt das Original zu ändern. JavaScript fehlt eine integrierte Unterstützung, und es erfordert Bibliotheken wie Mori oder Unermut. Js.
  • Leistung: Während anfänglich speicherintensiv erscheint, verbessert die Unveränderlichkeit die Leistung häufig durch "strukturelle Freigabe". Es vereinfacht auch die Veränderung, die in UI -Frameworks von entscheidender Bedeutung ist.

Unveränderlichkeit verstehen:

, die einfach ausgedrückt, bedeutet, dass sich etwas ändern kann. Bei der Programmierung ermöglichen veränderliche Objekte Änderungen in ihrem Zustand. Die Unmutabilität ist das Gegenteil: Ein unveränderlicher Wert bleibt nach der Erstellung konstant. Viele gemeinsame Werte sind unveränderlich. Zum Beispiel:

<code class="language-javascript">const statement = "I am an immutable value";
const otherStr = statement.slice(8, 17); </code>

otherStr ist eine neue Zeichenfolge; statement bleibt unverändert. String -Methoden erstellen neue Zeichenfolgen; Sie ändern das Original nicht. Dies liegt daran, dass Saiten unveränderlich sind. Zahlen teilen dieses Merkmal.

Mutability in JavaScript:

Die integrierten Saiten und Zahlen von JavaScript sind unveränderlich. Arrays sind jedoch veränderlich:

<code class="language-javascript">let arr = [];
let v2 = arr.push(2); // arr is modified; v2 holds the new length</code>
an

würde sich anders verhalten: ImmutableArray

<code class="language-javascript">const arr = new ImmutableArray([1, 2, 3, 4]);
const v2 = arr.push(5);

arr.toArray(); // [1, 2, 3, 4]
v2.toArray();  // [1, 2, 3, 4, 5]</code>
In ähnlicher Weise würde ein

(Ersetzen von Objekten) ein neues Objekt zurückgeben, wenn die Eigenschaften "festgelegt" sind: ImmutableMap

<code class="language-javascript">const person = new ImmutableMap({name: "Chris", age: 32});
const olderPerson = person.set("age", 33);

person.toObject(); // {name: "Chris", age: 32}
olderPerson.toObject(); // {name: "Chris", age: 33}</code>

Unveränderlichkeit in der Praxis (unter Verwendung von unveränderlich.js):

Da JavaScript keine nativen, unveränderlichen Strukturen gibt, verwenden wir eine Bibliothek wie Unerable.js. Betrachten wir ein Beispiel für ein Minensuchspiel. Das Board ist eine unveränderliche Karte mit

als unveränderliche Liste unveränderlicher Karten (jede Kachel). Initialisierung verwendet tiles 's immutable.js Funktion: fromJS

<code class="language-javascript">function createGame(options) {
  return Immutable.fromJS({
    cols: options.cols,
    rows: options.rows,
    tiles: initTiles(options.rows, options.cols, options.mines)
  });
}</code>
Spiellogikfunktionen nehmen die unveränderliche Struktur und geben neue Instanzen zurück.

kennzeichnet eine Fliese, wie enthüllt. Mit veränderlichen Daten: revealTile

<code class="language-javascript">function revealTile(game, tile) {
  game.tiles[tile].isRevealed = true; //Direct mutation
}</code>
Mit unveränderlichen Daten verwenden wir

: setIn

<code class="language-javascript">function revealTile(game, tile) {
  return game.setIn(['tiles', tile, 'isRevealed'], true);
}</code>

Gibt eine neue unveränderliche Instanz zurück. Zur Robustheit können wir nach setIn: getIn nach Fliesen existieren.

<code class="language-javascript">function revealTile(game, tile) {
  return game.getIn(['tiles', tile]) ?
    game.setIn(['tiles', tile, 'isRevealed'], true) :
    game;
}</code>

Leistungsüberlegungen:

Während das Erstellen neuer Objekte ineffizient erscheint, minimiert "Structural Sharing" den Speicheraufwand. Die Leistungsauswirkungen werden häufig durch die Vorteile der Unveränderlichkeit überwogen.

Verbesserte Änderungsverfolgung:

Unveränderlichkeit vereinfacht die Veränderung der Verfolgung in UI -Frameworks. Vergleich der Referenzen (a === b) effizient bestimmt, ob sich der Zustand geändert hat.

Schlussfolgerung:

Unveränderlichkeit verbessert die Codequalität und -wartbarkeit. Während die Lernkurve erforderlich ist, überwiegen ihre Vorteile häufig die anfänglichen Herausforderungen. Entdecken Sie den bereitgestellten CodePen (Link, der in Originaltext nicht bereitgestellt wird) für ein vollständiges Beispiel für Minenweiter.

(FAQS -Abschnitt für die Kürze entfernt, da es sich um eine Wiederholung von Informationen handelt, die bereits im Haupttext enthalten sind. Wenn Sie es möchten, lassen Sie es mich bitte wissen.)

Das obige ist der detaillierte Inhalt vonUnveränderlichkeit in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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