Wyświetlanie obiektu w JavaScript

Jak wyświetlić obiekt JavaScript?

Wyświetlanie obiektu JavaScript spowoduje wyjście [object Object].

Przykład

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

Spróbuj sam

Często stosowanymi rozwiązaniami do wyświetlania obiektów JavaScript są:

  • Wyświetl atrybuty obiektu według nazwy
  • Wyświetl atrybuty obiektu w pętli
  • Wyświetl obiekt za pomocą Object.values()
  • Wyświetl obiekt za pomocą JSON.stringify()

Wyświetl atrybuty obiektu

Atrybuty obiektu można wyświetlić jako ciąg znaków:

Przykład

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

Spróbuj sam

Wyświetl obiekt w pętli

Można zbierać atrybuty obiektu w pętli:

Przykład

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

Spróbuj sam

Musisz używać person[x] w pętli.

person.x nie będzie działał (ponieważ x jest zmienną).

Używając Object.values()

Poprzez użycie Object.values(), każdy obiekt JavaScript można przekształcić na tablicę:

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

myArray Teraz jest tablica JavaScript, można ją wyświetlić:

Przykład

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

Spróbuj sam

Od 2016 roku wszystkie główne przeglądarki ją obsługują Object.values().

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

Używając JSON.stringify()

Każdy obiekt JavaScript można użyć funkcji JavaScript JSON.stringify() Wykonaj stringifikację (przekształć na ciąg znaków):

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

myString Teraz jest ciąg znaków JavaScript, można go wyświetlić:

Przykład

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

Spróbuj sam

Wynik będzie stringiem zgodnym z JSON marką:

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

JSON.stringify() Zawarta w JavaScript, wszystkie główne przeglądarki ją obsługują.

Stringifikacja daty

JSON.stringify Konwersja daty na ciąg znaków:

Przykład

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

Spróbuj sam

S串izacja funkcji

JSON.stringify Nie będzie serializować funkcji:

Przykład

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

Spróbuj sam

Jeśli funkcję przekształcimy w string przed serializacją, może to być "stałe".

Przykład

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

Spróbuj sam

S串izacja tablicy

Można również zserializować tablicę JavaScript jako string:

Przykład

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

Spróbuj sam

Wynik będzie stringiem zgodnym z JSON marką:

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