JavaScript Visningsobjekt

Hur visar man ett JavaScript-objekt?

Visa JavaScript-objektet kommer att visa [object Object].

Exempel

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

Prova det själv

Några vanliga lösningar för att visa JavaScript-objekt är:

  • Visa objektets egenskaper efter namn
  • Visa objektets egenskaper i en loop
  • Visa objektet med hjälp av Object.values()
  • Visa objektet med hjälp av JSON.stringify()

Visa objektets egenskaper

Objektets egenskaper kan visas som sträng:

Exempel

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

Prova det själv

Visa objekt i loopen

Du kan samla in objektets egenskaper i loopen:

Exempel

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

Prova det själv

Du måste använda person[x] i loopen.

person.x kommer inte att fungera (eftersom x är en variabel).

Använd Object.values()

Genom att använda Object.values()Och alla JavaScript-objekt kan omvandlas till en array:

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

myArray Det är nu en JavaScript-array, det kan visas:

Exempel

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

Prova det själv

Sedan 2016 har alla huvudsakliga webbläsare stöttat Object.values().

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

Använd JSON.stringify()

Alla JavaScript-objekt kan använda JavaScript-funktioner JSON.stringify() Gör till sträng (konvertera till sträng):

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

myString Det är nu en JavaScript-sträng, det kan visas:

Exempel

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

Prova det själv

Resultatet kommer att vara en sträng som följer JSON-märkningskonventionen:

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

JSON.stringify() Innehåller i JavaScript, alla huvudsakliga webbläsare stöder.

Datum till sträng

JSON.stringify Konvertera datum till sträng:

Exempel

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

Prova det själv

Funktionsserialisering

JSON.stringify Funktioner kommer inte att serialiseras:

Exempel

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

Prova det själv

Om man konverterar funktionen till en sträng innan den serialiseras, kan detta vara "fast".

Exempel

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

Prova det själv

Arrayserialisering

Det är också möjligt att serialisera JavaScript-arrays:

Exempel

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

Prova det själv

Resultatet kommer att vara en sträng som följer JSON-märkningskonventionen:

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