Объекты отображения JavaScript
Как отображать объекты JavaScript?
Отображение объекта JavaScript выведет [object Object] .
Пример
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Некоторые распространенные решения для отображения объектов JavaScript:
- Отображение свойств объекта по имени
- Отображение свойств объекта в цикле
- Отображение объекта с помощью Object.values()
- Отображение объекта с использованием JSON.stringify()
Отображение свойств объекта
Свойства объекта могут отображаться в виде строки:
Пример
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Отображение объекта в цикле
Свойства объекта можно собирать в цикле:
Пример
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Вы должны использовать person[x] в цикле.
person.x не будет работать (поскольку x — переменная).
Использование Object.values()
Любой объект JavaScript можно преобразовать в массив с помощью Object.values():
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArray теперь представляет собой массив JavaScript, готовый к отображению:
Пример
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values() поддерживается во всех основных браузерах с 2016 года.
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
Использование JSON.stringify()
Любой объект JavaScript может быть преобразован в строку (преобразован в строку) с помощью функции JavaScript
JSON.stringify():
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myString теперь это строка JavaScript, готовая к отображению:
Пример
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Результатом будет строка, следующая за нотацией JSON:
{"имя":"Джон","возраст":50,"город":"Нью-Йорк"}
JSON.stringify()включен в JavaScript и поддерживается во всех основных браузерах.
Упорядочить даты
JSON.stringifyпреобразует даты в строки:
Пример
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Строковые функции
JSON.stringifyне будет строковать функции:
Пример
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Это можно «исправить», если вы преобразуете функции в строки перед преобразованием в строки.
Пример
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Строковые массивы
Также можно преобразовать массивы JavaScript в строки:
Пример
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
Результатом будет строка, следующая за нотацией JSON:
["Джон", "Питер", "Салли", "Джейн"]