วัตถุที่แสดง JavaScript

แนะนำวิชาที่เลือกเพิ่มเติม：

แสดง JavaScript แบบสำหรับปริมาณของตัวแปรจะทำให้ปรากฎ [object Object]。

ตัวอย่าง

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

ลองด้วยตัวเอง

วิธีแสดง Object JavaScript ที่ใช้บ่อยคือ:

  • แสดงอัตริบิวต์ของ Object ด้วยชื่อ
  • แสดงอัตริบิวต์ของ Object ด้วยวง loop
  • แสดง Object ด้วยการใช้ Object.values()
  • แสดง Object ด้วยการใช้ JSON.stringify()

แสดงอัตริบิวต์ของ Object

อัตริบิวต์ของ Object สามารถแสดงเป็นตัวอักษร:

ตัวอย่าง

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

ลองด้วยตัวเอง

แสดง Object ในวง loop

สามารถรวบรวมอัตрибิวต์ของ Object ในวง loop

ตัวอย่าง

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] ในวง loop

person.x จะไม่มีผล (เพราะ x คือตัวแปร)

โดยใช้ Object.values()

ด้วยการใช้ Object.values()，ทุก Object JavaScript สามารถแปลงเป็น Array:

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

myArray ปัจจุบันเป็น Array 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 Object 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"]