JavaScript Отображение объектов
Как отображать объекты JavaScript?
Отображение объекта JavaScript приведет к выводу [объект 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:
{"name":"John","age":50,"city":"New York"}
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:
["John","Peter","Sally","Jane"]
