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;

循环显示对象

可以在 for...in 循环中收集对象的属性：

const person = {
  name: "John",
  age: 30,
  city: "New York",
};

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}

document.getElementById("demo").innerHTML = txt;

使用 Object.values()

任何 JavaScript 对象都可以使用 Object.values() 方法转换为数组：

const person = {
  name: "John",
  age: 30,
  city: "New York",
};

const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

自 2016 年以来，所有主要浏览器都支持 Object.values() 。

使用 JSON.stringify()

任何 JavaScript 对象都可以使用 JSON.stringify() 函数进行字符串化（转换为字符串）：

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":"纽约"}'

字符串化日期

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;

上例中的 age 属性值已经不是一个方法了，而是一个字符串了。

字符串化数组

JSON.stringify() 也可以对数组进行字符串化：

const arr = ["John", "Peter", "Sally", "Jane"];

let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

结果将是一个遵循 JSON 符号的字符串：["John", "Peter", "Sally", "Jane"]