JavaScript Display 对象
如何显示 JavaScript 对象?
显示 JavaScript 对象将输出 [object Object]。
实例
var person = {name:"John", age:30, city:"New York"};
document.getElementById("demo").innerHTML = person;
亲自试一试 »
document.getElementById("demo").innerHTML = person;
显示 JavaScript 对象的一些常见解决方案是：
- 按名称显示对象属性
- 循环显示对象属性
- 使用 Object.values() 显示对象
- 使用 JSON.stringify() 显示对象
显示对象属性
对象的属性可显示为字符串：
实例
var person = {name:"John", age:30, city:"New York"};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
亲自试一试 »
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
在循环中显示对象
可以在循环中收集对象的属性：
实例
var x, txt = "";
var person = {name:"John", age:30, city:"New York"};
for (x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
亲自试一试 »
var person = {name:"John", age:30, city:"New York"};
for (x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
您必须在循环中使用 person[x]。
person.x 将不起作用（因为 x 是一个变量）。
使用 Object.values()
通过使用 Object.values()，任何 JavaScript 对象都可以被转换为数组：
var person = {name:"John", age:30, city:"New York"};
var myArray = Object.values(person);
var myArray = Object.values(person);
myArray 现在是 JavaScript 数组，可以显示了：
实例
var person = {name:"John", age:50, city:"New York"};
var myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
亲自试一试 »
var myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
自 2016 年以来，所有主要浏览器都支持 Object.values()。
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
使用 JSON.stringify()
任何 JavaScript 对象都可以使用 JavaScript 函数 JSON.stringify() 进行字符串化（转换为字符串）：
var person = {name:"John", age:30, city:"New York"};
var myString = JSON.stringify(person);
var myString = JSON.stringify(person);
myString 现在是 JavaScript 字符串，可以显示了：
实例
var person = {name:"John", age:30, city: "New York"};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
亲自试一试 »
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
结果将是一个遵循 JSON 标记法的字符串：
{"name":"John","age":50,"city":"New York"}
JSON.stringify() 包含在 JavaScript 中，所有主流浏览器都支持。
| Yes | 8.0 | 3.5 | 4.0 | 10.5 |
日期字符串化
JSON.stringify 将日期转换为字符串：
实例
var person = {name:"John", today:new Date()};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
亲自试一试 »
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
函数字符串化
JSON.stringify 不会对函数进行字符串化：
实例
var person = {name:"John", age:function () {return 30;}};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
亲自试一试 »
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
如果在字符串化之前将函数转换为字符串，这可以是"固定的"。
实例
var person = {name:"John", age:function () {return 30;}};
person.age = person.age.toString();
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
亲自试一试 »
person.age = person.age.toString();
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
数组字符串化
也可以对 JavaScript 数组进行字符串化：
实例
var arr = ["John", "Peter", "Sally", "Jane"];
var myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
亲自试一试 »
var myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
结果将是一个遵循 JSON 标记法的字符串：
["John","Peter","Sally","Jane"]
