Mảng (Array)

Bài 7 – Hiểu và sử dụng mảng trong JavaScript. Làm chủ các phương thức cơ bản map, filter, find, forEach.

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

Mảng (Array)

Mảng là cấu trúc dữ liệu quan trọng nhất trong JavaScript. Mảng dùng để lưu danh sách các giá trị: danh sách điểm, danh sách học viên, danh sách sản phẩm,…

Tư duy cốt lõi:
“Khi có nhiều dữ liệu cần quản lý theo nhóm → dùng mảng.”


1. Tạo mảng

let scores = [8, 9, 10];
let users = ["Dai", "Nam", "Lan"];

Mảng có thể chứa nhiều kiểu dữ liệu khác nhau:

let mixed = [1, "hello", true];

🔑 GHI NHỚ: Mảng dùng để lưu danh sách các giá trị cùng loại hoặc khác loại

2. Truy cập phần tử

Mảng đánh số từ 0.

let scores = [8, 9, 10];

console.log(scores[0]); // 8
console.log(scores[1]); // 9

🔑 GHI NHỚ: Index trong mảng bắt đầu từ 0, không phải 1

3. Thêm, xóa phần tử

Thêm cuối mảng

scores.push(11);

Xóa cuối mảng

scores.pop();

Thêm đầu mảng

scores.unshift(7);

Xóa đầu mảng

scores.shift();

🔑 GHI NHỚ: push/pop thao tác cuối mảng, unshift/shift thao tác đầu mảng

4. Duyệt mảng – cách đơn giản nhất

for…of

for (let s of scores) {
  console.log(s);
}

forEach

scores.forEach(s => console.log(s));

🔑 GHI NHỚ: for...offorEach đều dùng để duyệt mảng, nhưng forEach là method của mảng

5. Các phương thức xử lý mảng – rất quan trọng

5.1. map – tạo mảng mới từ mảng cũ

let doubled = scores.map(s => s * 2);

5.2. filter – lọc dữ liệu theo điều kiện

let passed = scores.filter(s => s >= 8);

5.3. find – tìm phần tử đầu tiên thỏa mãn điều kiện

let ten = scores.find(s => s === 10);

5.4. includes – kiểm tra tồn tại

scores.includes(9); // true

5.5. reduce – tổng hợp dữ liệu (nâng cao)

let total = scores.reduce((sum, s) => sum + s, 0);

🔑 GHI NHỚ: map, filter, find đều tạo ra mảng mới, không thay đổi mảng gốc

6. Độ dài mảng (length)

console.log(scores.length);

Dùng nhiều khi lặp hoặc kiểm tra dữ liệu.

🔑 GHI NHỚ: length cho biết số lượng phần tử trong mảng

7. Mảng của đối tượng (rất quan trọng trong thực tế)

let students = [
  { name: "Dai", score: 9 },
  { name: "Nam", score: 7 },
  { name: "Lan", score: 10 }
];

let top = students.filter(s => s.score >= 8);
console.log(top);

Đây là dạng dữ liệu cực kỳ phổ biến khi làm API.

🔑 GHI NHỚ: Mảng object là cấu trúc dữ liệu phổ biến trong các API và database

8. Sai lầm thường gặp

  • Dùng for…in để duyệt mảng → không chính xác
  • Quên return trong map/filter
  • Nhầm lẫn giữa mapforEach:
    • map → có mảng mới
    • forEach → không trả về mảng
  • Sửa trực tiếp dữ liệu trong mảng gốc → dẫn đến bug khi xử lý dữ liệu lớn

⚠️ GHI NHỚ: Luôn tạo mảng mới khi cần thay đổi dữ liệu, tránh mutate mảng gốc

9. Bài tập thực hành

Bài 1

Cho mảng:

let nums = [1, 2, 3, 4, 5];

Hãy:

  • Tính tổng
  • Lọc số chẵn
  • Nhân đôi mỗi phần tử

Bài 2

Cho mảng sinh viên:

let students = [
  { name: "A", score: 9 },
  { name: "B", score: 7 },
  { name: "C", score: 5 }
];

Hãy:

  • Lọc sinh viên đạt (score >= 6.5)
  • Tìm sinh viên điểm cao nhất
  • Tạo mảng mới chỉ chứa tên

Bài 3

Tạo hàm: getAverage(scores) → trả về điểm trung bình của mảng.

10. Kết luận bài học

  • Mảng giúp quản lý danh sách dữ liệu
  • map, filter, find, forEach là nhóm công cụ thực tế nhất
  • Mảng của đối tượng rất quan trọng trong xử lý API

🔑 GHI NHỚ QUAN TRỌNG:

  • Luôn tạo mảng mới khi cần thay đổi dữ liệu
  • map, filter, find không thay đổi mảng gốc
  • forEach phù hợp cho việc duyệt và thực hiện hành động
  • Mảng object là cấu trúc phổ biến trong API và database
12 bài học
Bài 7
Tiến độ hoàn thành 58%

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