Obiekty wyświetlania JavaScript
Jak wyświetlić obiekty JavaScript?
Wyświetlenie obiektu JavaScript zwróci [object Object] .
Przykład
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Oto kilka typowych rozwiązań wyświetlania obiektów JavaScript:
- Wyświetlanie właściwości obiektu według nazwy
- Wyświetlanie właściwości obiektu w pętli
- Wyświetlanie obiektu za pomocą Object.values()
- Wyświetlanie obiektu za pomocą JSON.stringify()
Wyświetlanie właściwości obiektu
Właściwości obiektu mogą być wyświetlane jako ciąg:
Przykład
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Wyświetlanie obiektu w pętli
Właściwości obiektu można zebrać w pętli:
Przykład
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Musisz użyć w pętli person[x] .
person.x nie będzie działać (ponieważ x jest zmienną).
Korzystanie z Object.values()
Dowolny obiekt JavaScript można przekonwertować na tablicę za pomocą Object.values():
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArrayjest teraz tablicą JavaScript, gotową do wyświetlenia:
Przykład
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values()jest obsługiwany we wszystkich głównych przeglądarkach od 2016 roku.
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
Korzystanie z JSON.stringify()
Każdy obiekt JavaScript może zostać skrócony (przekonwertowany na łańcuch) za pomocą funkcji JavaScript
JSON.stringify():
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myStringjest teraz ciągiem JavaScript, gotowym do wyświetlenia:
Przykład
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Wynikiem będzie ciąg znaków zgodny z notacją JSON:
{"name":"Jan","wiek":50,"city":"Nowy Jork"}
JSON.stringify()jest zawarty w JavaScript i obsługiwany we wszystkich głównych przeglądarkach.
Uściślanie dat
JSON.stringifykonwertuje daty na ciągi:
Przykład
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Funkcje zwięzłe
JSON.stringifynie streści funkcji:
Przykład
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Można to „naprawić”, jeśli przekonwertujesz funkcje na ciągi przed określeniem ciągów.
Przykład
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Uporządkuj tablice
Możliwe jest również skrócenie tablic JavaScript:
Przykład
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
Wynikiem będzie ciąg znaków zgodny z notacją JSON:
["Jan","Piotr","Sally","Jane"]