Cả dot notation và bracket notation đều được dùng để truy cập property của đối tượng trong JavaScript. Dot notation được dùng nhiều hơn vì dễ đọc, dễ hiểu và ít verbose hơn. Sự khác biệt chính là bracket notation cho phép truy cập property bằng biến.
Dưới đây là mã về bracket notation vs dot notation trong JavaScript:
Ví dụ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; color: blueviolet; } </style> </head> <body> <h1>Dot notation vs Bracket notation trong JavaScript</h1> <div class="result"></div> <button class="Btn">CLICK HERE</button> <h3>Nhấn nút trên để truy cập property student1 object dùng dot và bracket notation</h3> <script> let resEle = document.querySelector(".result"); let BtnEle = document.querySelector(".Btn"); function Student(name, age, standard) { this.name = name; this.age = age; this.standard = standard; } let student1 = new Student("Rohan", 18, 12); BtnEle.addEventListener("click", () => { let str = "name", str1 = "age", str2 = "standard"; resEle.innerHTML ="Sử dụng dot notation <br>student1.name = " + student1.name + "<br>"; resEle.innerHTML += "student1.age = " + student1.age + "<br>"; resEle.innerHTML += "student1.standard = " + student1.standard + "<br><br>"; resEle.innerHTML +=" Sử dụng bracket notation <br>student1[str] = " + student1[str] +"<br>"; resEle.innerHTML += "student1[str1] = " + student1[str1] + "<br>"; resEle.innerHTML += "student1[str2] = " + student1[str2] + "<br>"; }); </script> </body> </html>
Kết quả
Khi nhấn nút 'CLICK HERE':
