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.
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/popthao tác cuối mảng,unshift/shiftthao 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...ofvàforEachđều dùng để duyệt mảng, nhưngforEachlà 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Ớ:
lengthcho 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
returntrongmap/filter - Nhầm lẫn giữa
mapvàforEach:map→ có mảng mớiforEach→ 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,forEachlà 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,findkhông thay đổi mảng gốcforEachphù 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