JavaScript 对象显示
如何显示 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;
自己动手试一试 »
在循环中显示属性
对象的属性可以在循环中收集
示例
// 创建一个对象
const person = {
name: "John",
age: 30,
city: "New York"
};
// 构建文本
let text = "";
for (let x in person) {
text += person[x] + " ";
};
// 显示文本
document.getElementById("demo").innerHTML = text;
自己动手试一试 »
注意
您必须在循环中使用 person[x]。
person.x 将不起作用（因为 x 是循环变量）。
使用 Object.values()
Object.values() 创建一个包含属性值的数组
// 创建一个对象
const person = {
name: "John",
age: 30,
city: "New York"
};
// 创建一个数组
const myArray = Object.values(person);
// 显示数组
document.getElementById("demo").innerHTML = myArray;
自己动手试一试 »
使用 Object.entries()
Object.entries() 使在循环中使用对象变得容易。
示例
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "<br>";
}
自己动手试一试 »
使用 JSON.stringify()
JavaScript 对象可以使用 JSON 方法 JSON.stringify() 转换为字符串。
JSON.stringify() 包含在 JavaScript 中，并且受所有主要浏览器的支持。
注意
结果将是一个以 JSON 格式书写的字符串
{"name":"John","age":50,"city":"New York"}
示例
// 创建一个对象
const person = {
name: "John",
age: 30,
city: "New York"
};
// Stringify 对象
let myString = JSON.stringify(person);
// 显示字符串
document.getElementById("demo").innerHTML = myString;
自己动手试一试 »
