JavaScript 输出对象
直接输出 JavaScript 对象会将对象展示为 [object Object]
,本文整理了一些优雅的输出对象的解决方案。
直接输出 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"]