Tự học JavaScript - Module 11: Các phương thức duyệt mảng hiện đại (Map, Filter, Reduce)

Table of contents

1. Array.forEach()

Dùng để duyệt qua từng phần tử và thực hiện một hành động nào đó. Nó không tạo ra mảng mới.

const numbers = [45, 4, 9, 16];
numbers.forEach((value) => {
  console.log(value);
});

2. Array.map() - Biến đổi dữ liệu

Đây là phương thức quan trọng nhất. Nó tạo ra một mảng mới bằng cách thực hiện một hàm trên từng phần tử của mảng cũ.

const numbers1 = [1, 2, 3, 4];
const numbers2 = numbers1.map(x => x * 2); // [2, 4, 6, 8]

Lưu ý: map() không làm thay đổi mảng gốc.

3. Array.filter() - Lọc dữ liệu

Tạo ra một mảng mới chứa các phần tử vượt qua được một đợt “kiểm tra” (trả về true).

const ages = [15, 20, 18, 25, 10];
const adults = ages.filter(age => age >= 18); // [20, 18, 25]

4. Array.reduce() - Tính toán giá trị tổng hợp

Dùng để “thu gọn” một mảng về một giá trị duy nhất (ví dụ: tính tổng, tính trung bình cộng).

const numbers = [1, 2, 3, 4];
let sum = numbers.reduce((total, value) => total + value, 0); // 10

5. Các phương thức khác (Every, Some, Find)

• every(): Kiểm tra xem tất cả phần tử có thỏa mãn điều kiện không.
• some(): Kiểm tra xem có ít nhất một phần tử thỏa mãn điều kiện không.
• find(): Trả về giá trị của phần tử đầu tiên thỏa mãn điều kiện.

const numbers = [4, 9, 16, 25];
let first = numbers.find(x => x > 10); // 16

6. Toán tử Spread (…)

Dòng code [...array] giúp bạn “trải” các phần tử mảng ra ngoài. Cực kỳ hữu ích để sao chép mảng hoặc gộp nhiều mảng thành một.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]

Lời kết Module 11

Làm chủ được bộ ba Map, Filter và Reduce sẽ nâng tầm trình độ JavaScript của bạn lên một bậc. Hầu như mọi thao tác với dữ liệu từ API sau này đều xoay quanh các phương thức này.

Trong Module 12 (Cuối cùng), chúng ta sẽ tổng hợp tất cả kiến thức đã học để xây dựng một dự án nhỏ thực tế.

Hẹn gặp lại các bạn!