Objek Tampilan JavaScript

如何显示 JavaScript 对象？

显示 JavaScript 对象将输出 [object Object].

实例

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

亲自试一试

Penyelesaian umum untuk paparkan objek JavaScript adalah:

  • Paparkan properti objek berdasarkan nama
  • Paparkan properti objek dalam pengulangan
  • Paparkan objek dengan Object.values()
  • Paparkan objek dengan JSON.stringify()

Paparkan properti objek

Properti objek boleh dipaparkan sebagai string:

实例

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

亲自试一试

Paparkan objek dalam pengulangan

Boleh mengumpulkan properti objek dalam pengulangan:

实例

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

亲自试一试

Anda mesti menggunakan person[x] dalam lingkungan pengulangan.

person.x tidak akan berfungsi (kerana x adalah variabel).

Dengan Object.values()

Dengan menggunakan Object.values(), setiap objek JavaScript boleh diubahsuai kepada array:

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

myArray Sekarang adalah array JavaScript, boleh dipaparkan:

实例

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

亲自试一试

Sejak 2016, semua pelayar utama mendukungnya Object.values().

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

Dengan JSON.stringify()

Setiap objek JavaScript boleh digunakan dengan fungsi JavaScript JSON.stringify() Melakukan stringifikasi (menjadikan string):

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

myString Sekarang adalah string JavaScript, boleh dipaparkan:

实例

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() Dalam JavaScript, semua pelayar utama yang digunakan mendukungnya.

Stringifikasi tarikh

JSON.stringify Tukar tarikh kepada string:

实例

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"]