JavaScript 顯示對象

如何顯示 JavaScript 對象？

顯示 JavaScript 對象將輸出 [object Object]。

實例

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = person;

親自試一試

顯示 JavaScript 對象的一些常見解決方案是：

  • 按名稱顯示對象屬性
  • 循環顯示對象屬性
  • 使用 Object.values() 顯示對象
  • 使用 JSON.stringify() 顯示對象

顯示對象屬性

對象的屬性可顯示為字符串：

實例

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

親自試一試

在循環中顯示對象

可以在循環中收集對象的屬性：

實例

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;

親自試一試

您必須在循環中使用 person[x]。

person.x 將不起作用（因為 x 是一個變量）。

使用 Object.values()

通過使用 Object.values()，任何 JavaScript 對象都可以被轉換為數組：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);

myArray 現在是 JavaScript 數組，可以顯示了：

實例

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

親自試一試

自 2016 年以來，所有主要瀏覽器都支持 Object.values()。

Chrome IE Firefox Safari Opera
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

使用 JSON.stringify()

任何 JavaScript 對象都可以使用 JavaScript 函數 JSON.stringify() 進行字符串化（轉換為字符串）：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);

myString 現在是 JavaScript 字符串，可以顯示了：

實例

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

親自試一試

結果將是一個遵循 JSON 標記法的字符串：

{"name":"Bill","age":19,"city":"Seattle"}

JSON.stringify() 包含在 JavaScript 中，所有主流瀏覽器都支持。

日期字符串化

JSON.stringify 將日期轉換為字符串：

實例

const person = {
  name: "Bill",
  today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

親自試一試

函數字符串化

JSON.stringify 不會對函數進行字符串化：

實例

const person = {
  name: "Bill",
  age: function () {return 19;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

親自試一試

如果在字符串化之前將函數轉換為字符串，這可以是“固定的”。

實例

const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

親自試一試

數組字符串化

也可以對 JavaScript 數組進行字符串化：

實例

const arr = ["Bill", "Steve", "Elon", "David"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

親自試一試

結果將是一個遵循 JSON 標記法的字符串：

["Bill","Steve","Elon","David"]