Loạt bài JavaScript cơ bản · Bài 12/18 — Mục lục học tập

Một học viên có tên, số bài hoàn thành và trạng thái hoạt động. Nếu tách thành các mảng riêng, bạn dễ ghép nhầm dữ liệu. Đối tượng gom các thuộc tính của cùng một thực thể vào một cấu trúc.

Tạo và truy cập đối tượng

const student = {
  id: 1,
  name: "An",
  completedLessons: 3,
  isActive: true
};
console.log(student.name); // An
console.log(student["completedLessons"]); // 3
const field = "name";
console.log(student[field]); // An

Dùng dấu chấm khi biết tên thuộc tính trong mã. Dùng ngoặc vuông khi tên thuộc tính nằm trong một biến hoặc có ký tự không phù hợp với cú pháp dấu chấm. student.field tìm thuộc tính có tên field; nó không tự lấy nội dung của biến field.

Thêm, sửa và kiểm tra thuộc tính

const student = { name: "An", completedLessons: 0 };
student.completedLessons += 1;
student.level = "beginner";
console.log(student.level); // beginner
console.log(student.email); // undefined
console.log(Object.hasOwn(student, "name")); // true

Đọc thuộc tính không tồn tại trả undefined. Nếu cần phân biệt thuộc tính không tồn tại với thuộc tính có giá trị undefined, dùng phép kiểm tra sở hữu thuộc tính. Đối tượng khai báo bằng const vẫn cho phép thay đổi thuộc tính như ở bài biến.

Destructuring và spread

const student = { id: 1, name: "An", completedLessons: 3 };
const { name, completedLessons } = student;
console.log(name, completedLessons);
const updated = { ...student, completedLessons: 4 };
console.log(student.completedLessons); // 3
console.log(updated.completedLessons); // 4

Destructuring lấy thuộc tính thành biến để dùng thuận tiện. Spread tạo bản sao nông; thuộc tính viết sau ghi đè thuộc tính cùng tên trước đó. Nếu đối tượng chứa đối tượng con, spread chưa sao chép sâu phần con.

Làm việc với danh sách đối tượng

const students = [
  { id: 1, name: "An", score: 8 },
  { id: 2, name: "Bình", score: 4 },
  { id: 3, name: "Chi", score: 9 }
];
const passedNames = students
  .filter((student) => student.score >= 5)
  .map((student) => student.name);
console.log(passedNames); // ["An", "Chi"]
const selected = students.find((student) => student.id === 2);
console.log(selected.name); // Bình

Trong ví dụ trên, id là định danh của học viên, còn chỉ số chỉ là vị trí trong mảng. Vị trí có thể thay đổi khi sắp xếp hoặc xóa; không nên coi vị trí là định danh lâu dài. Khi dùng find với dữ liệu không chắc tồn tại, cần kiểm tra kết quả trước khi đọc thuộc tính.

Bài tập

Tạo mảng mới tăng điểm học viên id 2 lên 6, giữ nguyên các học viên còn lại và không sửa đối tượng gốc của học viên đó.

const updatedStudents = students.map((student) => {
  if (student.id === 2) {
    return { ...student, score: 6 };
  }
  return student;
});
console.log(updatedStudents.find((student) => student.id === 2).score); // 6

Ghi nhớ: chọn cấu trúc dữ liệu gần với ý nghĩa thực tế. Mảng giữ danh sách; object giữ các thuộc tính liên quan của một mục trong danh sách.