Đối tượng hiển thị JavaScript
Làm cách nào để hiển thị các đối tượng JavaScript?
Hiển thị một đối tượng JavaScript sẽ xuất ra [object Object] .
Ví dụ
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Hãy tự mình thử »Một số giải pháp phổ biến để hiển thị các đố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 trong vòng lặp
- Hiển thị đối tượng bằng Object.values()
- Hiển thị đối tượng bằng JSON.stringify()
Hiển thị thuộc tính đối tượng
Các thuộc tính của một đối tượng có thể được hiển thị dưới dạng một chuỗi:
Ví dụ
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Hãy tự mình thử »Hiển thị đối tượng trong vòng lặp
Các thuộc tính của một đối tượng có thể được thu thập trong một vòng lặp:
Ví dụ
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Hãy tự mình thử »Bạn phải sử dụng user[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ất kỳ đối tượng JavaScript nào cũng có thể được chuyển đổi thành một mảng bằng cách sử dụng Object.values()
:
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArray
bây giờ là một mảng JavaScript, sẵn sàng được hiển thị:
Ví dụ
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Hãy tự mình thử » Object.values()
được hỗ trợ trong tất cả các trình duyệt chính kể từ năm 2016.
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ể được xâu chuỗi (chuyển đổi thành chuỗi) bằng hàm JavaScript JSON.stringify()
:
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myString
bây giờ là một chuỗi JavaScript, sẵn sàng được hiển thị:
Ví dụ
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Hãy tự mình thử »Kết quả sẽ là một chuỗi theo ký hiệu JSON:
{"name:"John","tuổi":50,"city://New York"}
JSON.stringify()
được bao gồm trong JavaScript và được hỗ trợ trong tất cả các trình duyệt chính.
Chuỗi ngày
JSON.stringify
chuyển đổi ngày thành chuỗi:
Ví dụ
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Hãy tự mình thử »Xâu chuỗi các hàm
JSON.stringify
sẽ không xâu chuỗi các hàm:
Ví dụ
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Hãy tự mình thử »Điều này có thể được "sửa" nếu bạn chuyển đổi các hàm thành chuỗi trước khi xâu chuỗi.
Ví dụ
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Hãy tự mình thử »Xâu chuỗi mảng
Cũng có thể xâu chuỗi các mảng JavaScript:
Ví dụ
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
Hãy tự mình thử »Kết quả sẽ là một chuỗi theo ký hiệu JSON:
["John","Peter","Sally","Jane"]