Đối tượng hiển thị JavaScript

Làm thế nào để hiển thị đối tượng JavaScript?

Hiển thị đối tượng JavaScript sẽ xuất ra [object Object].

Mẫu

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

Thử ngay

Một số giải pháp phổ biến để hiển thị đối tượng JavaScript là:

  • Hiển thị thuộc tính đối tượng theo tên
  • Hiển thị thuộc tính đối tượng bằng vòng lặp
  • Hiển thị đối tượng bằng cách sử dụng Object.values()
  • Hiển thị đối tượng bằng cách sử dụng JSON.stringify()

Hiển thị thuộc tính đối tượng

Các thuộc tính của đối tượng có thể hiển thị dưới dạng chuỗi:

Mẫu

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

Thử ngay

Hiển thị đối tượng trong vòng lặp

Bạn có thể thu thập thuộc tính của đối tượng trong vòng lặp:

Mẫu

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

Thử ngay

Bạn phải sử dụng person[x] trong vòng lặp.

person.x sẽ không hoạt động (vì x là một biến).

sử dụng Object.values()

Bằng cách sử dụng Object.values()Bất kỳ đối tượng JavaScript nào cũng có thể được chuyển đổi thành mảng:

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

myArray Bây giờ là mảng JavaScript, có thể hiển thị được:

Mẫu

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

Thử ngay

Từ năm 2016, tất cả các trình duyệt chính đều hỗ trợ Object.values().

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

sử dụng JSON.stringify()

Bất kỳ đối tượng JavaScript nào cũng có thể sử dụng hàm JavaScript JSON.stringify() Thực hiện chuỗi hóa (chuyển đổi thành chuỗi):

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

myString Bây giờ là chuỗi JavaScript, có thể hiển thị được:

Mẫu

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

Thử ngay

Kết quả sẽ là một chuỗi tuân theo định dạng JSON:

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

JSON.stringify() Được hỗ trợ trong JavaScript, tất cả các trình duyệt phổ biến đều hỗ trợ.

Chuỗi hóa ngày

JSON.stringify Chuyển đổi ngày thành chuỗi:

Mẫu

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

Thử ngay

Định dạng hàm

JSON.stringify Hàm sẽ không được định dạng chuỗi:

Mẫu

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

Thử ngay

Nếu chuyển hàm thành chuỗi trước khi định dạng chuỗi, nó có thể là "định dạng cố định".

Mẫu

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

Thử ngay

Định dạng chuỗi mảng

Cũng có thể định dạng chuỗi cho mảng JavaScript:

Mẫu

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

Thử ngay

Kết quả sẽ là một chuỗi tuân theo định dạng JSON:

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