วัตถุ JavaScript:คู่มือ

แม้ว่ารายการเป็นวิธีที่มีประโยชน์ในการจัดเก็บข้อมูล แต่ก็ไม่สะดวกที่จะใช้เมื่อคุณต้องการจัดเก็บคุณสมบัติหลายอย่างเกี่ยวกับวัตถุเฉพาะในรายการ ตัวอย่างเช่น หากคุณต้องการจัดเก็บข้อมูลในคุกกี้ทั้งหมดที่ขายในร้านคุกกี้ คุณจะต้องสร้างรายการหลายรายการเพื่อจัดเก็บข้อมูล

นั่นคือที่มาของอ็อบเจ็กต์ ออบเจ็กต์อนุญาตให้คุณจัดเก็บข้อมูลในคู่ของชื่อ:ค่า ซึ่งหมายความว่าคุณสามารถเพิ่มป้ายกำกับให้กับข้อมูลที่คุณจัดเก็บไว้ในแอปพลิเคชันของคุณ

ในคู่มือนี้ เราจะพูดถึงว่าอ็อบเจกต์คืออะไร และคุณจะนำไปใช้ในโค้ดได้อย่างไร เราจะพูดถึงการสร้างออบเจ็กต์ การปรับเปลี่ยนออบเจ็กต์ และการลบออบเจ็กต์ในภาษาการเขียนโปรแกรม JavaScript

วัตถุคืออะไร

ออบเจ็กต์เป็นประเภทข้อมูลในจาวาสคริปต์ ประกอบด้วยชื่อและค่าตั้งแต่ศูนย์ขึ้นไป ซึ่งถูกจับคู่เข้าด้วยกัน แต่ละชื่อทำหน้าที่เป็นป้ายกำกับสำหรับค่า ซึ่งหมายความว่าหากคุณต้องการเข้าถึงค่าเฉพาะในออบเจ็กต์ สิ่งที่คุณต้องทำคืออ้างอิงป้ายกำกับของออบเจ็กต์ บางครั้งชื่อเรียกว่า "กุญแจ"

ค่าสามารถมีข้อมูลประเภทใดก็ได้ ไม่ว่าจะเป็นสตริง ตัวเลข หรืออ็อบเจกต์อื่น ค่ายังสามารถประกอบด้วยคุณสมบัติและเมธอด ซึ่งเป็นฟังก์ชันที่ใช้กับอ็อบเจกต์เฉพาะ

คีย์และค่าถูกแมปเข้าด้วยกันเพื่อสร้างคู่ของคีย์:ค่าในวัตถุ JS

วัตถุ JavaScript เป็นแนวคิดที่สร้าง JSON (ซึ่งย่อมาจาก JavaScript Object Notation) แม้ว่า JSON จะแตกต่างจาก JavaScript เล็กน้อย แต่โครงสร้างข้อมูลทั้งสองนี้ใช้วิธีจับคู่ name:value เพื่อเก็บข้อมูล

วิธีการสร้างวัตถุ

คุณสามารถสร้างวัตถุได้สองวิธี คุณสามารถใช้วิธีการสร้างวัตถุหรือประกาศตัวอักษรวัตถุ

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ตัวสร้างวัตถุใช้คำหลัก "ใหม่" เพื่อสร้างวัตถุใหม่:

const cookie = new Object();

สิ่งนี้สร้างวัตถุว่างที่เราสามารถเพิ่มค่าได้ นอกจากนี้เรายังสามารถประกาศวัตถุโดยใช้ตัวอักษรวัตถุ ซึ่งเป็นเพียงชุดของวงเล็บปีกกา:

const cookie = {};

ในทั้งสองตัวอย่างนี้ เราได้สร้างวัตถุว่าง คุณจะพบวิธีการเหล่านี้ใช้แทนกันได้ในแอปพลิเคชัน JavaScript วิธีการตามตัวอักษรอ็อบเจ็กต์อาจเป็นเรื่องธรรมดามากกว่าเนื่องจากความเรียบง่าย คุณต้องสร้างชุดวงเล็บปีกกาเท่านั้น

ในการสร้างออบเจ็กต์ที่มีข้อมูล เราสามารถใช้วากยสัมพันธ์ตามตัวอักษรของออบเจกต์ได้:

const raspberry_white_choc = {
	name: "Raspberry White Chocolate Chip",
	price: 1.50,
	available: true,
	stock: 42
}

วัตถุนี้มีสี่ชื่อและค่า ตัวอย่างเช่น ป้ายกำกับ "ราคา" เชื่อมโยงกับจำนวนจุดลอยตัว 1.50 ป้ายกำกับ “มี” เชื่อมโยงกับค่าบูลีน “จริง”

วิธีการอ่านวัตถุ

จนถึงตอนนี้ เราได้พูดถึงวิธีสร้างวัตถุแล้ว แต่วัตถุจะมีประโยชน์ไม่มากหากคุณไม่สามารถเข้าถึงเนื้อหาได้ มีสองวิธีในการอ่านเนื้อหาของวัตถุ คุณสามารถใช้เครื่องหมายจุด (.) หรือเครื่องหมายวงเล็บ ([])

สมมติว่าเราต้องการเรียกชื่อคุกกี้ช็อกโกแลตชิปของเรา เราสามารถทำได้โดยใช้รหัสนี้:

console.log(raspberry_white_choc.name);

รหัสนี้ส่งคืน:Raspberry White Chocolate Chip ในตัวอย่างของเรา เราได้อ้างอิงชื่อของอ็อบเจกต์ของเรา – “raspberry_white_choc” – ตามด้วยจุด ตามด้วยชื่อของพร็อพเพอร์ตี้ที่มีค่าที่เราต้องการดึงข้อมูล ด้วยเหตุนี้จึงเรียกว่าเครื่องหมายจุด มีจุดระหว่างชื่ออ็อบเจ็กต์และคุณสมบัติ

คุณยังสามารถใช้เครื่องหมายวงเล็บเพื่ออ่านวัตถุ:

console.log(raspberry_white_choc["available"]);

รหัสของเราส่งคืน:จริง เครื่องหมายวงเล็บคือตำแหน่งที่คุณระบุชื่อของอ็อบเจ็กต์ ตามด้วยชื่อของค่าที่คุณต้องการดึงข้อมูล ชื่อของค่าที่คุณต้องการเรียกควรอยู่ในเครื่องหมายคำพูด ตามด้วยวงเล็บเหลี่ยม

วิธีการแก้ไขวัตถุ

คุณสามารถแก้ไขวัตถุได้สามวิธี:

• เพิ่มรายการไปยังวัตถุ
• แก้ไขรายการวัตถุที่มีอยู่
• ลบรายการออกจากวัตถุ

มาพูดคุยกันทีละคน โดยอ้างอิงจากตัวอย่างคุกกี้ของเราก่อนหน้านี้

เพิ่มรายการไปยังวัตถุ

ต่างจากรายการตรงที่ไม่มี push() หรือ append() ฟังก์ชันที่คุณสามารถใช้เพื่อเพิ่มมูลค่าให้กับวัตถุ สิ่งที่คุณต้องทำคือกำหนดค่าใหม่ให้กับคุณสมบัติโดยใช้ตัวดำเนินการมอบหมาย

สมมติว่าเราต้องการเพิ่มค่า “gluten_free” ให้กับวัตถุของเรา เราสามารถทำได้โดยใช้ข้อความต่อไปนี้:

// Using bracket notation
raspberry_white_choc["gluten_free"] = false;
console.log(raspberry_white_choc.gluten_free);

// Using dot notation
raspberry_white_choc.gluten_free = false;
console.log(raspberry_white_choc.gluten_free);

รหัสของเราส่งคืน:

false
false

ในทั้งสองตัวอย่างนี้ เราได้สร้างรายการใหม่ในวัตถุที่เรียกว่า “gluten_free” ค่าที่เรากำหนดให้กับรายการนี้คือ “เท็จ”

แก้ไขรายการวัตถุที่มีอยู่

การเปลี่ยนเนื้อหาของออบเจ็กต์ทำงานในลักษณะเดียวกับการกำหนดค่าใหม่ให้กับออบเจกต์ ทั้งสองวิธีใช้ตัวดำเนินการกำหนดเพื่อแก้ไขวัตถุ

สมมติว่าเราได้เปลี่ยนสูตรคุกกี้ราสเบอรี่ไวท์ช็อกโกแลตชิปและตอนนี้ไม่มีกลูเตนแล้ว เราสามารถเปลี่ยนรายการ “gluten_free” ในวัตถุของเราโดยใช้รหัสนี้:

raspberry_white_choc.gluten_free = true;
console.log(raspberry_white_choc.gluten_free);

รหัสของเราส่งคืน:จริง คุณสามารถใช้เครื่องหมายวงเล็บเพื่อทำการเปลี่ยนแปลงได้หากต้องการ

ลบรายการออกจากวัตถุ

คำหลัก "ลบ" ช่วยให้คุณสามารถลบคุณสมบัติออกจากวัตถุได้ รหัสต่อไปนี้ช่วยให้เราสามารถลบคุณสมบัติ “gluten_free” ออกจากวัตถุของเรา:

delete raspberry_white_choc.gluten_free;
console.log(raspberry_white_choc);

รหัสของเราส่งคืน:

{ available: true, name: "Raspberry White Chocolate Chip", price: 1.5, stock: 42 }

อย่างที่คุณเห็น ชื่อ “gluten_free” ไม่มีอยู่ในวัตถุของเราแล้ว นั่นเป็นเพราะเราใช้คำสำคัญลบเพื่อลบออก

บทสรุป

โครงสร้างวัตถุ JavaScript ทำให้ง่ายต่อการจัดเก็บข้อมูลที่เกี่ยวข้อง ในบทความนี้ เราได้พูดถึงวิธีที่ออบเจ็กต์สามารถจัดเก็บข้อมูลบนคุกกี้สำหรับร้านคุกกี้ได้ นอกจากนี้เรายังสามารถใช้วัตถุเพื่อจัดเก็บบัญชีผู้ใช้ สูตรอาหารที่ร้านเบเกอรี่หรือปฏิทินได้