Objekt tief einfrieren

JavaScriptJavaScriptBeginner
Jetzt üben

This tutorial is from open-source community. Access the source code

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden wir untersuchen, wie man ein Objekt in JavaScript tief einfriert. Wir werden lernen, wie man die Object.freeze()-Methode rekursiv verwendet, um alle Eigenschaften eines Objekts einzufrieren und es somit unveränderlich zu machen. Am Ende dieses Labs werdet ihr ein besseres Verständnis dafür haben, wie ihr Änderungen an Objekten verhindert und die Dateneintegrität in eurem JavaScript-Code gewährleistet.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") subgraph Lab Skills javascript/variables -.-> lab-28263{{"Objekt tief einfrieren"}} javascript/data_types -.-> lab-28263{{"Objekt tief einfrieren"}} javascript/arith_ops -.-> lab-28263{{"Objekt tief einfrieren"}} javascript/comp_ops -.-> lab-28263{{"Objekt tief einfrieren"}} javascript/cond_stmts -.-> lab-28263{{"Objekt tief einfrieren"}} javascript/array_methods -.-> lab-28263{{"Objekt tief einfrieren"}} end

Wie man ein Objekt in JavaScript tief einfriert

Um ein Objekt in JavaScript tief einzufrieren, folge diesen Schritten:

  1. Verwende Object.keys(), um alle Eigenschaften des übergebenen Objekts zu erhalten.
  2. Iteriere über die Eigenschaften mit Array.prototype.forEach().
  3. Rufe Object.freeze() rekursiv auf alle Eigenschaften, die Objekte sind, und wende deepFreeze() erforderlichenfalls an.
  4. Schließlich verwende Object.freeze(), um das gegebene Objekt einzufrieren.

Hier ist der Code:

const deepFreeze = (obj) => {
  Object.keys(obj).forEach((prop) => {
    if (typeof obj[prop] === "object") deepFreeze(obj[prop]);
  });
  return Object.freeze(obj);
};

Du kannst das tief eingefrorene Objekt mit dem folgenden Code testen:

"use strict";

const val = deepFreeze([1, [2, 3]]);

val[0] = 3; // nicht erlaubt
val[1][0] = 4; // ebenfalls nicht erlaubt

Der obige Code wird einen Fehler werfen, da das val-Objekt tief eingefroren ist und nicht geändert werden kann.

Zusammenfassung

Herzlichen Glückwunsch! Du hast das Lab "Deep Freeze Object" abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.