วิธีเพิ่มรายการไปยังวัตถุด้วย JavaScript วานิลลา

ใน JavaScript มีสองวิธีในการเพิ่มรายการไปยังวัตถุ:

1. Dot dotation:object.thingToAdd
2. เครื่องหมายวงเล็บ:object['thingToAdd'

เครื่องหมายจุด

มาดูเครื่องหมายจุดกันก่อน:

let dog = {
  name: "Naya",
  age: "2",
  color: "black",
}

// Add item to dog object
dog.breed = "Rottweiler mix"

// Log object to console
console.log(dog)
// { name: "Naya", age: "2", color: "black", breed: "Rottweiler mix", }

นั่นคือเครื่องหมายจุด

เครื่องหมายวงเล็บ

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

let dog = {
  name: "Naya",
  age: "2",
  color: "black",
}

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

dog["weight"] = "34kg"

console.log(dog)
//  { name: "Naya", age: "2", color: "black", weight: "34kg", }

อย่างที่คุณเห็น มันทำงานเหมือนกับเครื่องหมายจุด — ในตัวอย่างนี้โดยเฉพาะ

ทีนี้มาเปรียบเทียบทั้งสองวิธีกัน

เครื่องหมายจุดเทียบกับเครื่องหมายวงเล็บ

ลองเพิ่ม หมายเลข เป็นชื่อคุณสมบัติใหม่โดยใช้ เครื่องหมายจุด:

// Dot notation
dog.1 = "Property 1"
console.log(dog)
// Uncaught SyntaxError: Unexpected number

อ๊ะ คุณได้รับข้อผิดพลาด! นั่นเป็นเพราะว่าด้วยเครื่องหมายจุด คุณใช้ตัวเลขไม่ได้ ในชื่อคุณสมบัติ

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

// Bracket notation
dog["1"] = "Property 1"
console.log(dog)
// { 1: "Property 1", age: "2", color: "black", name: "Naya" }

อีกครั้ง เครื่องหมายวงเล็บมีความยืดหยุ่นมากกว่าเครื่องหมายจุด

คุณควรใช้ตัวใด

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

เครื่องหมายจุด:

• ตัวระบุพร็อพเพอร์ตี้ (ชื่อ) และมีเฉพาะอักขระที่เป็นตัวอักษรและตัวเลขคละกัน (a—z) ขีดล่าง (_ ) หรือ $ .
• ตัวระบุพร็อพเพอร์ตี้ ไม่สามารถ เริ่มต้นด้วยตัวเลข
• ตัวระบุพร็อพเพอร์ตี้ ไม่สามารถ มีตัวแปร

สัญกรณ์วงเล็บ:

• ตัวระบุพร็อพเพอร์ตี้ (ชื่อ) ต้องเป็นประเภทค่าสตริงหรือตัวแปรที่ อ้างอิง สตริง
• คุณสามารถใช้ช่องว่างในตัวระบุ [" property"] ,
• ตัวระบุสตริง สามารถ ขึ้นต้นด้วยตัวเลข ["1st"]