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;
自己動手試一試 »
