วัตถุแสดง JavaScript

สารบัญ

จะแสดงวัตถุ JavaScript ได้อย่างไร

การแสดงวัตถุ JavaScript จะแสดงผล [วัตถุวัตถุ]

ตัวอย่าง

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Displaying a JavaScript object will output [object Object]:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person;
</script>

</body>
</html>

วิธีแก้ปัญหาทั่วไปในการแสดงออบเจ็กต์ JavaScript ได้แก่:

การแสดงคุณสมบัติของวัตถุตามชื่อ
การแสดงคุณสมบัติของวัตถุในวงวน
การแสดงวัตถุโดยใช้ Object.values()
การแสดงวัตถุโดยใช้ JSON.stringify()

การแสดงคุณสมบัติของวัตถุ

คุณสมบัติของวัตถุสามารถแสดงเป็นสตริง:

ตัวอย่าง

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display object properties:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person.name + ", " + person.age + ", " + person.city;
</script>

</body>
</html>

การแสดงวัตถุในวง

คุณสมบัติของวัตถุสามารถรวบรวมได้ในวง:

ตัวอย่าง

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let txt = "";
for (let x in person) {
txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display object properties:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

คุณต้องใช้ 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;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Object.values() converts an object to an array.</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = Object.values(person);
</script>

</body>
</html>

Object.values() ได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมดตั้งแต่ปี 2016


54 (2016)	14 (2016)	47 (2016)	10 (2016)	41 (2016)

การใช้ JSON.stringify()

วัตถุ JavaScript ใด ๆ สามารถทำให้เป็นสตริง (แปลงเป็นสตริง) ด้วยฟังก์ชัน JavaScript <รหัส class="w3-codespan">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;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Display properties in JSON format:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

ผลลัพธ์จะเป็นสตริงตามสัญกรณ์ JSON:

{"name": "จอห์น" "อายุ":50, "เมือง":นิวยอร์ก"}

JSON.stringify() รวมอยู่ใน JavaScript และรองรับในเบราว์เซอร์หลักทั้งหมด

สตริงวันที่

JSON.stringify แปลงวันที่เป็นสตริง:

ตัวอย่าง

const person = {
  name: "John",
  today: new Date()
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JSON.stringify will convert dates into strings:</p>

<p id="demo"></p>

<script>
var person = {
  name: "John",
  today: new Date()
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

สตริงฟังก์ชัน

JSON.stringify จะไม่สร้างสตริงให้กับฟังก์ชัน:

ตัวอย่าง

const person = {
  name: "John",
  age: function () {return 30;}
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JSON.stringify will not stringify functions:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: function () {return 30;}
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

สิ่งนี้สามารถ "แก้ไข" ได้หากคุณแปลงฟังก์ชันเป็นสตริงก่อนที่จะทำการสตริง

ตัวอย่าง

const person = {
  name: "John",
  age: function () {return 30;}
};
person.age = person.age.toString();

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Display Objects</h2>
<p>JSON.stringify will not stringify functions.</p>
<p>You have to convert functions to strings first:</p>

<p id="demo"></p>

<script>
const person = {
  name: "John",
  age: function () {return 30;}
};
person.age = person.age.toString();

document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>

</body>
</html>

สตริงอาร์เรย์

นอกจากนี้ยังเป็นไปได้ที่จะทำให้อาร์เรย์ JavaScript เป็นสตริง:

ตัวอย่าง

const arr = ["John", "Peter", "Sally", "Jane"];

let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<p>JSON.stringify can stringify arrays:</p>

<p id="demo"></p>

<script>
const arr = ["John", "Peter", "Sally", "Jane"];
document.getElementById("demo").innerHTML = JSON.stringify(arr);
</script>

</body>
</html>

ผลลัพธ์จะเป็นสตริงตามสัญกรณ์ JSON:

["จอห์น", "ปีเตอร์", "แซลลี่", "เจน"]