Đố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.

18/11/2025 DaiPhan
Bài 8 / 12

Đố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 keyundefined
  • 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
  • Destructuringspread 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
12 bài học
Bài 8
Tiến độ hoàn thành 67%

Đã hoàn thành 8/12 bài học