Отображение объекта JavaScript

Как отобразить JavaScript объект?

Отображение JavaScript объекта будет выводиться [object Object].

Пример

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

Попробуйте сами

Некоторые常见的 решения для отображения JavaScript объектов:

  • Отображение свойств объекта по имени
  • Отображение свойств объекта в цикле
  • Отображение объекта с помощью Object.values()
  • Отображение объекта с помощью JSON.stringify()

Отображение свойств объекта

Свойства объекта можно отобразить как строки:

Пример

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

Попробуйте сами

Отображение объекта в цикле

Сбор свойств объекта можно производить в цикле:

Пример

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

Попробуйте сами

Вы должны использовать person[x] в цикле.

person.x не будет работать (поскольку x - это переменная).

Используя Object.values()

Используя Object.values()Любой объект JavaScript можно преобразовать в массив:

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

myArray Теперь это массив JavaScript, его можно отобразить:

Пример

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

Попробуйте сами

С 2016 года все основные браузеры поддерживают Object.values().

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

Используя JSON.stringify()

Любой объект JavaScript можно преобразовать в строку с помощью функции JavaScript JSON.stringify() Произвести строковое представление (преобразовать в строку):

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

myString Теперь это строка JavaScript, её можно отобразить:

Пример

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

Попробуйте сами

Результат будет строкой, которая следуют правилам JSON-маркера:

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

JSON.stringify() Включено в JavaScript, поддерживается всеми основными браузерами.

Строковое представление даты

JSON.stringify Конвертируйте дату в строку:

Пример

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

Попробуйте сами

Структурирование функций

JSON.stringify Функции не будут структурированы:

Пример

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

Попробуйте сами

Если перед структурированием функции преобразовать её в строку, это может быть "фиксированным".

Пример

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

Попробуйте сами

Структурирование массива

También se можно структурировать строку JavaScript массива:

Пример

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

Попробуйте сами

Результат будет строкой, которая следуют правилам JSON-маркера:

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