Đối tượng (Object)
Bài 8 – Hiểu và sử dụng Object trong JavaScript. Kiến thức nền tảng để quản lý dữ liệu dạng key/value và làm việc với API.
Đối Tượng (Object)
Object là cấu trúc dữ liệu quan trọng nhất trong JavaScript.
Hầu hết dữ liệu từ API, cấu hình hệ thống hoặc thông tin người dùng đều nằm trong Object.
Tư duy cốt lõi:
“Khi dữ liệu có nhiều thuộc tính → dùng Object.”
1. Tạo Object
let student = {
name: "Dai",
age: 18,
score: 9
};
Object gồm cặp key : value.
2. Truy cập thuộc tính
Dùng dấu chấm:
console.log(student.name);
Dùng dấu ngoặc vuông:
console.log(student["age"]);
Cách này dùng khi key là biến:
let key = "score";
console.log(student[key]);
## 3. Thêm – sửa – xóa thuộc tính
Thêm thuộc tính:
```js
student.email = "dai@example.com";
Sửa thuộc tính:
student.age = 20;
Xóa thuộc tính:
delete student.score;
4. Object trong thực tế: rất phổ biến
Dữ liệu API thường trả về dạng:
let user = {
id: 1,
name: "Nam",
roles: ["admin", "editor"],
info: {
email: "nam@example.com",
active: true
}
};
Bạn cần hiểu cách truy cập:
user.info.email
user.roles[0]
5. Duyệt Object
JavaScript có ba cách duyệt quan trọng:
5.1. for…in – duyệt key
for (let key in student) {
console.log(key, student[key]);
}
5.2. Object.keys – lấy danh sách key
Object.keys(student); // ["name", "age", "score"]
5.3. Object.values – lấy danh sách value
Object.values(student); // ["Dai", 18, 9]
6. Object trong mảng – rất quan trọng
Dữ liệu thực tế thường là mảng object:
let students = [
{ name: "A", score: 9 },
{ name: "B", score: 7 },
{ name: "C", score: 5 }
];
Xử lý:
let passed = students.filter(s => s.score >= 6.5);
let names = students.map(s => s.name);
let top = students.find(s => s.score === 9);
3 dòng code – xử lý dữ liệu như chuyên nghiệp.
7. Destructuring – cách lấy giá trị nhanh (ES6)
let { name, age } = student;
console.log(name, age);
Dùng khi làm việc với API và hàm callback → giúp code ngắn và rõ ràng hơn.
8. Spread Operator – sao chép và mở rộng Object
Sao chép:
let clone = { ...student };
Thêm thuộc tính khi sao chép:
let updated = { ...student, active: true };
Công cụ cực mạnh khi xử lý state (React, Vue…).
9. Sai lầm thường gặp
- Truy cập sai key →
undefined - Gán trực tiếp khiến Object bị thay đổi ở nhiều nơi
- Nhầm giữa ”=” (gán object tham chiếu) và ”…” (sao chép object)
- Quên kiểm tra key tồn tại trong API
10. Bài tập thực hành
Bài 1
Tạo object book gồm:
- title
- author
- year
- price
Sau đó:
- Cập nhật price
- Thêm thuộc tính “category”
- In ra tất cả key và value
Bài 2
Với mảng object sau:
let users = [
{ name: "An", age: 20 },
{ name: "Binh", age: 17 },
{ name: "Chi", age: 22 }
];
Thực hiện:
- Lọc người >= 18 tuổi
- Lấy danh sách tên
- Tìm người tên “Chi”
Bài 3
Dùng spread operator để tạo object mới từ student nhưng thêm thuộc tính level: “Pro”.
11. Kết luận bài học
- Object là nền tảng mô tả dữ liệu theo dạng key/value
- Mảng object là dạng dữ liệu phổ biến nhất khi làm API
- Destructuring và spread giúp viết code hiện đại, gọn gàng
- Nắm vững object giúp bạn xử lý dữ liệu hiệu quả ở mọi ứng dụng