Objekte in JavaScript drucken

1. Verwenden Sie die Methode console.log(), um Objekte in JavaScript zu drucken
2. Verwenden Sie die Methode console.dir(), um Objekte in JavaScript zu drucken
3. Unterschied zwischen console.log() und console.dir() in JavaScript
4. Verwenden Sie die Methode JSON.stringify(), um Objekte in JavaScript zu drucken
5. Abschluss

Die Funktion Drucken ist eine der Hauptfunktionen von JavaScript. In diesem Artikel lernen Sie allgemeine und einfache Techniken zum Drucken von Objekten in JavaScript kennen.

Die Funktion Drucken in JavaScript zeigt oder druckt den Inhalt einer JavaScript-Datei. Es kann eine Objekteigenschaft oder ein Array sein.

Es gibt mehrere Möglichkeiten, Objekte in JavaScript zu drucken.

Verwenden Sie die Methode console.log(), um Objekte in JavaScript zu drucken

Die Funktion console.log() ist eine gängige Methode, um ein Objekt in JavaScript zu drucken. Diese Funktion zeigt/druckt das Argument auf einer Webkonsole, dann kann eine Zeichenfolge als Ergebnis erhalten werden.

Syntax:

console.log(object);

Lassen Sie uns ein Array namens array erstellen, das folgende Werte enthält: Sam und Roger und ein Objekt namens car, das Objekteigenschaften wie type und model enthält. Dann können wir diesen Eigenschaften Werte als Ford und Mustang zuweisen.

Wie unten gezeigt, können wir das Array und das Objekt mit der Funktion console.log() drucken.

Beispielcode:

const array = ['Sam', 'Roger'];
const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(array);
console.log(car);

Nach Ausführung dieses Codes werden das Array und das Objekt im String-Format angezeigt.

Ausgang:

Im folgenden Code hat das Objekt Auto beispielsweise zwei Objekteigenschaften: Typ und Modell. Die Funktion console.log() wurde verwendet, um diese Eigenschaften auszudrucken.

Beispielcode:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(car.type);
console.log(car.model);

Als Ergebnis wurden der Autotyp Ford und das Modell Mustang erhalten.

Ausgang:

Außerdem können Sie die Werte mit der Funktion console.log() in einer einzigen Zeile drucken.

Beispielcode:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(car.type, ',', car.model);

Der obige Code liefert das Ergebnis unten.

Ausgang:

Verwenden Sie die Methode console.dir(), um Objekte in JavaScript zu drucken

Die Funktion console.dir() ist eine weitere Möglichkeit, Objekte in JavaScript zu drucken. Damit kann der Benutzer die Eigenschaften eines bestimmten Objekts als hierarchische Auflistung, auch als interaktive Auflistung bezeichnet, drucken.

Sie können die Eigenschaften des Objekts anzeigen, indem Sie auf das Dreieck klicken.

Syntax:

console.dir(object);

Nehmen wir das vorherige Beispiel. Wie unten gezeigt, können Sie die Funktion console.dir() verwenden, um die Eigenschaften des Objekts auszudrucken.

Das Objekt Auto muss hier nicht angegeben werden, da es das einzige Objekt im Code ist.

Beispielcode:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.dir(car);

Als Ergebnis können wir das Objekt in der Konsole mit einem Aufklappdreieck erfassen. Nachdem Sie darauf geklickt haben, können wir die untergeordneten Objekte wie folgt anzeigen.

Ausgang:

Unterschied zwischen console.log() und console.dir() in JavaScript

Der Hauptunterschied zwischen console.log() und console.dir() besteht darin, dass die Funktion console.log() uns eine toString-Darstellung des Objekts und die Funktion console.dir() liefert gibt uns eine interaktive Liste des JavaScript-Objekts und seiner Eigenschaften. Nehmen wir ein Beispiel.

Ein Array wird mit den Werten Ford, Toyota und BMW deklariert, und das Objekt car wird mit den Eigenschaften type und model deklariert.

Sowohl das Array als auch das Objekt werden mit der Funktion console.log() und der Funktion console.dir() angezeigt. Als Ergebnis der ersten beiden console.log()-Funktionen können wir ihre toString-Formate sehen.

Beispielcode:

const array = ['Ford', 'Toyota', 'BMW'];
const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(array);
console.log(car);
console.dir(array);
console.dir(car);

Ausgang:

Verwenden Sie die Methode JSON.stringify(), um Objekte in JavaScript zu drucken

Bei der Betrachtung der Webentwicklung wird JSON verwendet, um Daten von einem Webserver und Daten auf einen Webserver umzuwandeln. Bei der Übertragung müssen die Daten den Webserver im String-Format erreichen; andernfalls treten Fehler auf.

In Anbetracht dessen müssen wir die Objekte auch in JavaScript in das String-Format konvertieren, bevor wir sie an die Konsole senden. JavaScript stellt dazu die Funktion JSON.stringify() zur Verfügung.

Durch diese Funktion werden Objekte in das String-Format konvertiert und dann erfolgreich an den Server gesendet.

Syntax:

JSON.stringify(object);

Fügen wir PS als neues Attribut zum vorherigen Objekt Auto hinzu. PS bezieht sich auf die PS des Autos.

Außerdem ist HP numerisch, der 460 als Wert hat. Das Objekt car kann nicht in die Konsole geparst werden, ohne es in einen String zu konvertieren, weil HP numerisch ist.

Konvertieren wir es also mit der Funktion JSON.stringify() in einen String.

Fügen Sie dem Objekt zunächst eine neue Eigenschaft als HP hinzu und weisen Sie 460 als Wert zu. Verwenden Sie dann die Funktion JSON.stringify(), um das Autoobjekt in einen String umzuwandeln. Weisen Sie die Funktion JSON.stringify() einer neuen Variablen (carString) zu und drucken Sie die neue Variable mit der Funktion console.log().

Der Code lautet wie folgt.

const car = {
  type: 'Ford',
  model: 'Mustang',
  HP: 460
};

let carString = JSON.stringify(car);
console.log(carString);

Sie können dies auch tun, ohne eine neue Variable zu deklarieren, indem Sie die Funktion JSON.stringify() zum Argument für die Funktion console.log() machen.

const car = {
  type: 'Ford',
  model: 'Mustang',
  HP: 460
};

console.log(JSON.stringify(car));

Das Ergebnis ist in beiden Fällen eine Zeichenfolge des Objekts, jedoch im JSON-Format.

Ausgang:

Abschluss

Mit den obigen Methoden ist es klar, dass wir ein Objekt in JavaScript drucken können. Es gibt ein paar weitere Methoden, wie zum Beispiel console.table() und Object.entries(), wo wir Objekte in JavaScript anzeigen können, aber die hier besprochenen Methoden sind die gebräuchlichsten und am häufigsten verwendeten.