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 txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
คุณต้องใช้person[x]ในลูป
person.xจะไม่ทำงาน (เพราะxเป็นตัวแปร)
การใช้ Object.values()
วัตถุ JavaScript ใด ๆ สามารถแปลงเป็นอาร์เรย์โดยใช้Object.values():
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArrayตอนนี้เป็นอาร์เรย์ JavaScript พร้อมที่จะแสดง:
ตัวอย่าง
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values()ได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมดตั้งแต่ปี 2016
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
ใช้ JSON.stringify()
ออบเจ็กต์ JavaScript ใดๆ สามารถทำให้สตริง (แปลงเป็นสตริง) ได้ด้วยฟังก์ชัน JavaScript
JSON.stringify():
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myStringตอนนี้เป็นสตริง JavaScript พร้อมที่จะแสดง:
ตัวอย่าง
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
ผลลัพธ์จะเป็นสตริงตามสัญกรณ์ JSON:
{"name":"John","age":50,"city":"นิวยอร์ก"}
JSON.stringify()รวมอยู่ใน JavaScript และรองรับในเบราว์เซอร์หลักทั้งหมด
สตริงวันที่
JSON.stringifyแปลงวันที่เป็นสตริง:
ตัวอย่าง
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
ฟังก์ชันสตริง
JSON.stringifyจะไม่ทำให้ฟังก์ชันแน่น:
ตัวอย่าง
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
นี้สามารถ "แก้ไข" หากคุณแปลงฟังก์ชันเป็นสตริงก่อนที่จะทำให้สตริง
ตัวอย่าง
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Stringify Arrays
มันยังเป็นไปได้ที่จะทำให้อาร์เรย์ JavaScript เป็นสตริง:
ตัวอย่าง
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
ผลลัพธ์จะเป็นสตริงตามสัญกรณ์ JSON:
["จอห์น","ปีเตอร์","แซลลี่","เจน"]