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

Sau khi biết duyệt mảng, bạn có thể dùng các phương thức diễn đạt trực tiếp việc cần làm: đổi từng phần tử, giữ phần tử thỏa điều kiện, tìm một phần tử hoặc gom thành kết quả. Các ví dụ sau dùng mảng số để bạn dễ kiểm tra.

map: biến đổi mỗi phần tử

const prices = [100, 200, 300];
const discounted = prices.map((price) => price * 0.9);
console.log(discounted); // [90, 180, 270]
console.log(prices); // [100, 200, 300]

Callback là hàm được truyền vào phương thức. map gọi callback với từng phần tử và tạo một mảng mới có cùng số phần tử. Luôn trả lại giá trị cần đưa vào mảng kết quả. Nếu callback có ngoặc nhọn mà quên return, các phần tử mới sẽ là undefined.

filter: giữ các phần tử phù hợp

const scores = [4, 8, 5, 9];
const passedScores = scores.filter((score) => score >= 5);
console.log(passedScores); // [8, 5, 9]

filter tạo mảng mới chứa các phần tử có callback trả về giá trị truthy. Không có phần tử phù hợp thì kết quả là mảng rỗng, không phải null.

find, some và every

const scores = [4, 8, 5, 9];
console.log(scores.find((score) => score >= 8)); // 8
console.log(scores.find((score) => score > 10)); // undefined
console.log(scores.some((score) => score < 5)); // true
console.log(scores.every((score) => score >= 5)); // false

find trả phần tử đầu tiên phù hợp; nó không trả danh sách. some trả boolean cho câu hỏi có ít nhất một phần tử phù hợp không; every kiểm tra tất cả. Với mảng rỗng, some trả false và every trả true; hãy cân nhắc ý nghĩa nghiệp vụ trước khi dùng every để kết luận đã có dữ liệu.

reduce: gom thành một giá trị

const prices = [100, 200, 300];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 600

sum là giá trị tích lũy. Số 0 sau callback là giá trị khởi tạo, giúp phép cộng hoạt động cả với mảng rỗng. Nếu chưa quen reduce, một vòng for…of rõ ràng vẫn là lựa chọn tốt; không cần dùng phương thức ngắn nhất bằng mọi giá.

Sắp xếp số đúng cách

const numbers = [2, 10, 1];
const sorted = [...numbers].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 10]
console.log(numbers); // [2, 10, 1]

sort mặc định so theo biểu diễn chuỗi nên không phù hợp để sắp xếp số như mong đợi. sort cũng sửa mảng đang gọi; ví dụ sao chép trước bằng spread rồi mới sắp xếp.

Bài tập

Cho điểm [3, 7, 8, 4, 10]. Lấy các điểm đạt, tăng mỗi điểm đạt thêm 1 nhưng tối đa 10, rồi tính tổng. Kết quả danh sách [8, 9, 10], tổng 27.

const scores = [3, 7, 8, 4, 10];
const improved = scores
  .filter((score) => score >= 5)
  .map((score) => Math.min(score + 1, 10));
const total = improved.reduce((sum, score) => sum + score, 0);
console.log(improved, total);

Ghi nhớ: map để đổi, filter để lọc, find để tìm một phần tử và reduce để gom kết quả. Ưu tiên tên callback dễ hiểu.