Heim >Web-Frontend >js-Tutorial >Wie erstelle ich dynamische Werte und Objekte in JavaScript?

Wie erstelle ich dynamische Werte und Objekte in JavaScript?

WBOYnach vorne: 2023-09-20 10:57:04722Durchsuche

如何在 JavaScript 中创建动态值和对象？

Dynamischer Wert ist der Wert, den wir einer dynamischen Variablen zuweisen. Eine dynamische Variable ist eine im Code fest codierte Variable ohne spezifischen Namen, deren Adresse beim Ausführen des Codes ermittelt wird. Der Name „dynamisch“ bezieht sich auf einen Wert, der manipuliert und geändert werden kann.

Hier erfahren Sie, wie Sie in JavaScript einen dynamischen Wert (auch Teil des Objektwerts) erstellen und den Namen der dynamischen Variablen ändern, ohne in Zukunft auf die Gruppe zuzugreifen. Das bedeutet, dass wir eine Variable deklarieren und dann dieselbe Variable als einen der Schlüssel im Objekt verwenden. Wenn wir in Zukunft den Namen der Variablen ändern müssen, können wir ihn ändern, ohne auf das Objekt zuzugreifen.

Um die obige Aufgabe zu erfüllen, weisen wir einfach den Variablennamen im Objekt mit eckigen Klammern [] zu, wie unten gezeigt –

Syntax

Hier ist die Syntax zum Erstellen dynamischer Werte und Objekte –

const key = &#39;KeyName&#39;;
const obj = { [key] : &#39;value&#39;};

hier sind key und value Schlüssel-Wert-Paare, die zum Erstellen von Objekten verwendet werden, „obj“ und keyName > sind die Werte von Schlüsseln.

Algorithmus

Schritt 1 – Definieren Sie die Schlüssel, die zum Erstellen des Objekts verwendet werden.
Schritt 2 – Erstellen Sie das Objekt und verwenden Sie die oben definierten Schlüssel.
Schritt 3 – Wenden Sie JSON.stringify() auf das oben erstellte Objekt an, um das Objekt anzuzeigen.

Beispiel 1

Wir können das folgende HTML-Programm verwenden, um die Deklaration dynamischer Variablen anzuzeigen.

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Dynamic values </h2>
   <div id = "result"> </div>
   <script>
      const key1 = "Haircolour";
      const key2 = "Eyecolour";
      const person = {
         f_name : "Rohan",
         l_name :"Joshi",
         [key1] : "Black",
         [key2] : "Brown"
      };

      // Converting the object value to show its value in html
      str = JSON.stringify(person);
      document.getElementById("result").innerHTML = str;

      // To print value of object in console
      console.log(person);
   </script>
</body>
</html>

Im obigen Code können wir also sehen, dass wir zwei Schlüssel f_name und l_name im Objekt deklariert haben, ohne geschweifte Klammern [] zu verwenden, und wir verwenden geschweifte Klammern für die Variablen key1 und key2, da diese beiden jeweils ein dynamischer Wert sind .

In der Ausgabe können wir sehen, dass der Name der Variablen „key1“ Augenfarbe und der Wert der Variablen „key2“ „Haarfarbe“ lautet.

Beispiel 2

Hier ist ein weiterer Code, der mehr Aufschluss darüber gibt, wie man den Namen einer dynamischen Variablen ändert, ohne auf das Objekt zuzugreifen. Hier tauschen wir einfach die Namen zweier dynamischer Variablen im Code aus.

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Dynamic values </h2>
   <div id = "result"> </div>
   <script>
      const key1 = "Haircolour";
      const key2 = "Eyecolour";
      const person = {
         f_name : "Rohan",
         l_name :"Joshi",
         [key1] : "Black",
         [key2] : "Brown"
      };

      // Converting the object value to show its value in html
      str = JSON.stringify(person);
      document.getElementById("result").innerHTML = str;

      // To print value of object in console
      console.log(person);
   </script>
</body>
</html>

In der Ausgabe können wir sehen, dass die Werte der beiden Variablen key1 und key2 gleich bleiben, ihre Namen jedoch geändert werden, ohne auf das Objekt zuzugreifen. Auf diese Weise erstellen wir dynamische Werte in JavaScript und Objekten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich dynamische Werte und Objekte in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json html 对象算法

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erhalte ich den Objektskalierungsfaktor eines Bildes mit FabricJS?Nächster Artikel：Wie erhalte ich den Objektskalierungsfaktor eines Bildes mit FabricJS?

In Verbindung stehende Artikel

Mehr sehen