Cách thêm các mục vào một đối tượng bằng Vanilla JavaScript

Trong JavaScript, có hai cách để thêm các mục vào một đối tượng:

1. Dấu chấm chấm:object.thingToAdd
2. Ký hiệu dấu ngoặc:object['thingToAdd'

Kí hiệu dấu chấm

Trước tiên hãy xem ký hiệu dấu chấm:

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", }

Đó là ký hiệu dấu chấm.

Ký hiệu dấu ngoặc

Ký hiệu ngoặc có ít hạn chế hơn về cách bạn có thể thêm thuộc tính vào một đối tượng. Hãy xem cùng một đối tượng chó trước đây:

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

Bây giờ, hãy thêm một thuộc tính và giá trị vào nó bằng ký hiệu trong ngoặc:

dog["weight"] = "34kg"

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

Như bạn có thể thấy, nó hoạt động giống hệt như với ký hiệu dấu chấm - trong ví dụ cụ thể này.

Bây giờ, hãy so sánh hai phương pháp.

Ký hiệu dấu chấm so với ký hiệu dấu ngoặc nhọn

Cố gắng thêm một số làm tên thuộc tính mới bằng cách sử dụng ký hiệu dấu chấm:

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

Rất tiếc, bạn gặp lỗi! Đó là bởi vì với ký hiệu dấu chấm, bạn không thể sử dụng số trong tên tài sản.

Nhưng bạn có thể sử dụng các số có ký hiệu trong ngoặc, miễn là số nhận dạng của bạn được định dạng là một chuỗi:

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

Một lần nữa, ký hiệu dấu ngoặc linh hoạt hơn ký hiệu dấu chấm.

Bạn nên sử dụng cái nào?

Bạn nên sử dụng ký hiệu dấu chấm bất cứ khi nào có thể vì nó dễ đọc hơn. Nhưng bất cứ khi nào bạn phải thêm thuộc tính vào một đối tượng và thuộc tính cần bắt đầu bằng một số, ký hiệu đặc biệt hoặc bất kỳ từ khóa dành riêng nào, thì hãy sử dụng ký hiệu dấu ngoặc vuông.

Kí hiệu dấu chấm:

• Mã định danh thuộc tính (tên) và chỉ chứa các ký tự chữ và số (a — z), dấu gạch dưới (_ ) hoặc $ .
• Số nhận dạng thuộc tính không thể bắt đầu bằng một con số.
• Số nhận dạng thuộc tính không thể chứa các biến.

Ký hiệu dấu ngoặc:

• Giá trị nhận dạng thuộc tính (tên) phải là một loại giá trị chuỗi hoặc một biến tham chiếu một chuỗi.
• Bạn có thể sử dụng dấu cách trên số nhận dạng [" property"] ,
• Số nhận dạng chuỗi can bắt đầu bằng các số ["1st"]