JavaScript-Display-Objekt

Wie zeigt man ein JavaScript-Objekt an?

Die Ausgabe eines JavaScript-Objekts wird wie folgt sein [object Object].

Beispiel

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = person;

Probieren Sie es selbst aus

Einige gängige Lösungen zur Anzeige von JavaScript-Objekten sind:

  • Nach Namen Objekteigenschaften anzeigen
  • Objekteigenschaften im Zyklus anzeigen
  • Verwenden Sie Object.values(), um Objekte anzuzeigen
  • Verwenden Sie JSON.stringify(), um Objekte anzuzeigen

Objekteigenschaften anzeigen

Objekteigenschaften können als Zeichenkette angezeigt werden:

Beispiel

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

Probieren Sie es selbst aus

Objekte im Zyklus anzeigen

Objekteigenschaften können im Zyklus gesammelt werden:

Beispiel

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;

Probieren Sie es selbst aus

Sie müssen person[x] im Zyklus verwenden.

person.x wird nicht funktionieren (weil x eine Variable ist).

verwendet werden Object.values()

durch die Verwendung Object.values(), jeder JavaScript-Objekt kann in eine Array umgewandelt werden:

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);

myArray Jetzt ist es ein JavaScript-Array und kann angezeigt werden:

Beispiel

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

Probieren Sie es selbst aus

Seit 2016 unterstützen alle主要的 Browser Object.values().

Chrome IE Firefox Safari Opera
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

verwendet werden JSON.stringify()

Jeder JavaScript-Objekt kann mit der JavaScript-Funktion JSON.stringify() Stringifizieren (in Zeichenkette umwandeln):

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);

myString Jetzt ist es eine JavaScript-Zeichenkette und kann angezeigt werden:

Beispiel

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Probieren Sie es selbst aus

Das Ergebnis wird eine Zeichenkette sein, die dem JSON-Format folgt:

{"name":"Bill","age":19,"city":"Seattle"}

JSON.stringify() Enthalten in JavaScript, wird von allen gängigen Browsern unterstützt.

Datum in Zeichenkette umwandeln

JSON.stringify Datum in eine Zeichenkette umwandeln:

Beispiel

const person = {
  name: "Bill",
  today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Probieren Sie es selbst aus

Funktionssstringifikation

JSON.stringify Funktionen werden nicht stringifiziert:

Beispiel

const person = {
  name: "Bill",
  age: function () {return 19;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Probieren Sie es selbst aus

Wenn die Funktion vor der Stringifikation in einen String umgewandelt wird, kann dies "fest" sein.

Beispiel

const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Probieren Sie es selbst aus

Array-Stringifikation

Es kann auch JavaScript-Arrays in Zeichenfolgen umgewandelt werden:

Beispiel

const arr = ["Bill", "Steve", "Elon", "David"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

Probieren Sie es selbst aus

Das Ergebnis wird eine Zeichenkette sein, die dem JSON-Format folgt:

["Bill","Steve","Elon","David"]