Oggetto visibile JavaScript

Come visualizzare un oggetto JavaScript?

Visualizzare un oggetto JavaScript produrrà [object Object].

Esempio

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

Prova personalmente

Alcune soluzioni comuni per visualizzare oggetti JavaScript sono:

  • Visualizzare le proprietà dell'oggetto per nome
  • Visualizzare le proprietà dell'oggetto nel ciclo
  • Visualizzare l'oggetto usando Object.values()
  • Visualizzare l'oggetto usando JSON.stringify()

Visualizzare le proprietà dell'oggetto

Le proprietà dell'oggetto possono essere visualizzate come stringhe:

Esempio

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

Prova personalmente

Visualizzare l'oggetto nel ciclo

Puoi raccogliere le proprietà dell'oggetto nel ciclo:

Esempio

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

Prova personalmente

Devi utilizzare person[x] nel ciclo.

person.x non avrà effetto (poiché x è una variabile).

usando Object.values()

usando Object.values(), qualsiasi oggetto JavaScript può essere convertito in un array:

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

myArray Ora è un array JavaScript, può essere visualizzato:

Esempio

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

Prova personalmente

Da 2016, tutti i principali browser supportano Object.values().

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

usando JSON.stringify()

Qualsiasi oggetto JavaScript può utilizzare la funzione JavaScript JSON.stringify() Eseguire la stringificazione (convertire in stringa):

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

myString Ora è una stringa JavaScript, può essere visualizzata:

Esempio

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

Prova personalmente

Il risultato sarà una stringa che segue la marcatura JSON:

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

JSON.stringify() Inclusa in JavaScript, tutti i browser mainstream supportano.

Stringificazione della data

JSON.stringify Convertire la data in una stringa:

Esempio

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

Prova personalmente

Stringificazione funzione

JSON.stringify Non viene stringificata la funzione:

Esempio

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

Prova personalmente

Se si trasforma la funzione in una stringa prima della stringificazione, può essere "fissa".

Esempio

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

Prova personalmente

Stringificazione array

È anche possibile stringificare un array JavaScript:

Esempio

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

Prova personalmente

Il risultato sarà una stringa che segue la marcatura JSON:

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