JavaScript Display Object

Hvordan viser man et JavaScript-objekt?

Viser JavaScript-objektet vil output [object Object].

Eksempel

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

Prøv det selv

Nogle almindelige løsninger til at vise JavaScript-objekter er:

  • Vis objektets egenskaber efter navn
  • Vis objektets egenskaber i løkke
  • Vis objektet ved hjælp af Object.values()
  • Vis objektet ved hjælp af JSON.stringify()

Vis objektets egenskaber

Objektets egenskaber kan vises som streng:

Eksempel

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

Prøv det selv

Vis objekt i løkken

Man kan samle objektets egenskaber i løkken:

Eksempel

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

Prøv det selv

Du skal bruge person[x] i løkken.

person.x vil ikke fungere (fordi x er en variabel).

Brug Object.values()

Ved at bruge Object.values()Enhver JavaScript-objekt kan konverteres til en array:

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

myArray Det er nu en JavaScript-array, der kan vises:

Eksempel

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

Prøv det selv

Siden 2016 har alle de vigtigste browser understøttet Object.values().

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

Brug JSON.stringify()

Enhver JavaScript-objekt kan bruge JavaScript-funktioner JSON.stringify() Udfør stringifikation (konverter til streng):

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

myString Det er nu en JavaScript-streng, der kan vises:

Eksempel

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

Prøv det selv

Resultatet vil være en streng, der følger JSON-mærkningsreglerne:

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

JSON.stringify() Inkluderet i JavaScript, alle主流browser understøtter.

Dato som streng

JSON.stringify Konverter dato til streng:

Eksempel

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

Prøv det selv

Funktionsserialisering

JSON.stringify Funktioner vil ikke blive serialiseret:

Eksempel

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

Prøv det selv

Hvis funktionen konverteres til en streng, før den serialiseres, kan det være "fast".

Eksempel

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

Prøv det selv

Arrayserialisering

Man kan også serialisere JavaScript-arrayer:

Eksempel

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

Prøv det selv

Resultatet vil være en streng, der følger JSON-mærkningsreglerne:

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