Trong JavaScript, có 3 cách chính để truy cập thuộc tính đối tượng:
- Ký hiệu chấm (dot notation):
obj.property - Ký hiệu ngoặc vuông (bracket notation):
obj['property'] - Phân rã đối tượng (destructuring):
const { property } = obj
Ví dụ
Mã dưới đây minh họa cả 3 cách với đối tượng {a: 22, b: 44}:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Truy cập thuộc tính JS</title>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.result, .sample { font-size: 18px; font-weight: 500; color: blueviolet; }
.sample { color: red; }
</style>
</head>
<body>
<h1>Truy cập thuộc tính đối tượng JavaScript</h1>
<div><pre class="sample">{a: 22, b: 44}</pre></div>
<div class="result"></div>
<button class="Btn">TRUY CẬP</button>
<h3>Nhấn nút để xem 3 cách truy cập</h3>
<script>
const resEle = document.querySelector(".result");
const btn = document.querySelector(".Btn");
const obj = { a: 22, b: 44 };
btn.addEventListener("click", () => {
resEle.innerHTML = `obj.a = ${obj.a}<br>`;
resEle.innerHTML += `obj['a'] = ${obj['a']}<br>`;
const { a } = obj;
resEle.innerHTML += `{a}=obj = ${a}<br>`;
});
</script>
</body>
</html>
Kết quả
Sau khi nhấn TRUY CẬP, cả 3 cách đều trả về giá trị 22 cho thuộc tính a.
Khi nào dùng cách nào?
- Dùng dot khi tên thuộc tính hợp lệ và biết trước.
- Dùng bracket khi tên thuộc tính có ký tự đặc biệt, khoảng trắng, hoặc là biến.
- Dùng destructuring khi cần trích xuất nhiều thuộc tính cùng lúc.