Cách Thêm Thuộc Tính Vào Object Với Vanilla JavaScript

Trong JavaScript có hai cách thêm mục vào object:

1. Dot notation: object.thingToAdd
2. Bracket notation: object['thingToAdd']

Dot notation

Xem dot notation trước:

let dog = { name: "Naya", age: "2", color: "black", } // Thêm mục vào dog object dog.breed = "Rottweiler mix" // Log object ra console console.log(dog) // { name: "Naya", age: "2", color: "black", breed: "Rottweiler mix", }

Đó là dot notation.

Bracket notation

Bracket notation ít hạn chế hơn về cách thêm thuộc tính vào object. Xem cùng object dog:

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

Thêm thuộc tính và giá trị với bracket notation:

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

Như bạn thấy, hoạt động giống hệt dot notation — trong ví dụ cụ thể này.

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

Dot notation vs Bracket notation

Thử thêm số làm tên thuộc tính mới bằng dot notation:

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

Lỗi! Với dot notation bạn không thể dùng số trong tên thuộc tính.

Nhưng bạn có thể dùng số với bracket notation, miễn định danh được format thành chuỗi:

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

Lại một lần, bracket notation linh hoạt hơn dot notation.

Nên dùng cái nào?

Thực hành tốt là dùng dot notation khi có thể vì dễ đọc hơn. Nhưng khi phải thêm thuộc tính vào object, và thuộc tính cần bắt đầu bằng số, ký tự đặc biệt, hoặc từ khóa dành riêng, hãy dùng bracket notation.

Dot notation:

• Tên định danh thuộc tính chỉ chứa ký tự alphanumeric (a—z), underscore (_), hoặc $.
• Tên định danh không thể bắt đầu bằng số.
• Tên định danh không thể chứa biến.

Bracket notation:

• Tên định danh thuộc tính phải là kiểu chuỗi hoặc biến tham chiếu đến chuỗi.
• Có thể dùng khoảng trắng trong định danh [" property"],
• Định danh chuỗi có thể bắt đầu bằng số ["1st"]