Phương thức mảng JavaScript: map, filter, reduce và hơn nữa

Mảng đi kèm một hộp đồ nghề

Mảng trong JavaScript có sẵn rất nhiều phương thức. Phần lớn những việc bạn hay viết vòng lặp for để làm, như biến đổi giá trị, lọc ra một số phần tử hay cộng tổng, đều có một phương thức làm được trong một dòng, dễ đọc hơn và kết hợp gọn gàng với các phương thức khác.

Bộ khởi đầu gồm ba phương thức (method): map, filter và reduce. Nắm vững ba phương thức này cùng vài phương thức họ hàng, đoạn code chi chít vòng lặp của bạn sẽ gọn lại thành thứ bạn đọc lướt là hiểu.

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

const doubled = nums.map(n => n * 2);
const evens = nums.filter(n => n % 2 === 0);
const total = nums.reduce((sum, n) => sum + n, 0);

console.log(doubled);
console.log(evens);
console.log(total);

Mỗi phương thức nhận một callback và trả về một thứ gì đó. Không phương thức nào sửa đổi nums. Đây là điều đáng ghi nhớ ngay từ đầu.

map: biến đổi từng phần tử

map nhận một hàm và gọi hàm đó trên từng phần tử, gom các giá trị trả về vào một mảng mới có cùng độ dài. Dùng nó khi bạn muốn "mỗi đầu vào cho ra một đầu ra".

const users = [
    { name: "Ada", age: 36 },
    { name: "Boris", age: 29 },
    { name: "Chen", age: 41 },
];

const names = users.map(user => user.name);
const labels = users.map(user => `${user.name} (${user.age})`);

console.log(names);
console.log(labels);

Callback còn nhận chỉ số làm đối số thứ hai nếu bạn cần: arr.map((item, i) => ...). Không cần thì cứ bỏ qua.

Một lỗi thường gặp: dùng map khi bạn không cần mảng trả về. Nếu bạn chỉ muốn in từng phần tử hay ghi vào cơ sở dữ liệu, đó là việc của forEach hoặc một vòng lặp thông thường.

filter: giữ lại những phần tử khớp

filter gọi một vị từ (predicate), tức một hàm trả về true hoặc false, trên từng phần tử và giữ lại những phần tử cho kết quả truthy. Mảng mới có độ dài bằng hoặc ngắn hơn mảng ban đầu.

const products = [
    { name: "Pen", price: 2, inStock: true },
    { name: "Desk", price: 180, inStock: false },
    { name: "Lamp", price: 35, inStock: true },
    { name: "Chair", price: 90, inStock: true },
];

const available = products.filter(p => p.inStock);
const affordable = products.filter(p => p.price < 50);

console.log(available);
console.log(affordable);

map và filter nối chuỗi với nhau rất tự nhiên. Hãy đọc chuỗi gọi từ trái sang phải như một pipeline:

const products = [
    { name: "Pen", price: 2, inStock: true },
    { name: "Desk", price: 180, inStock: false },
    { name: "Lamp", price: 35, inStock: true },
];

const inStockNames = products
    .filter(p => p.inStock)
    .map(p => p.name);

console.log(inStockNames);

Lọc trước, rồi mới map. Như vậy map chỉ chạy trên những phần tử còn lại.

reduce: gộp mảng thành một giá trị

reduce là phương thức tổng quát nhất trong ba phương thức. Bạn đưa cho nó một hàm reducer (accumulator, item) => newAccumulator và một giá trị khởi đầu. Nó duyệt qua mảng, đưa từng phần tử vào reducer cùng với giá trị tích lũy hiện có, rồi trả về giá trị tích lũy cuối cùng.

const nums = [3, 1, 4, 1, 5, 9, 2, 6];

const sum = nums.reduce((acc, n) => acc + n, 0);
const max = nums.reduce((acc, n) => (n > acc ? n : acc), -Infinity);

console.log(sum);
console.log(max);

Kết quả không nhất thiết phải là số. Nó có thể là một đối tượng, một mảng khác, một chuỗi, bất cứ thứ gì bạn dựng lên:

const people = [
    { name: "Ada", team: "red" },
    { name: "Boris", team: "blue" },
    { name: "Chen", team: "red" },
    { name: "Dari", team: "blue" },
];

const byTeam = people.reduce((acc, person) => {
    (acc[person.team] ??= []).push(person.name);
    return acc;
}, {});

console.log(byTeam);

Luôn truyền giá trị khởi đầu (đối số thứ hai). Thiếu nó, reduce lấy phần tử đầu tiên làm giá trị tích lũy ban đầu, cách này lỗi với mảng rỗng và thường cũng không cho ra điều bạn muốn.

reduce rất mạnh nhưng có thể khó đọc khi logic trở nên rối. Nếu reducer của bạn dài hơn vài dòng, một vòng lặp for...of thông thường thường rõ ràng hơn.

forEach: tác dụng phụ, không trả về gì

forEach giống map nhưng không trả về mảng. Nó dành cho lúc bạn muốn làm gì đó với từng phần tử, như in ra, gọi API hay cập nhật DOM, mà không cần một tập hợp mới.

const messages = ["hi", "hello", "hey"];

messages.forEach((msg, i) => {
    console.log(`${i}: ${msg}`);
});

Hai điều cần biết:

• forEach trả về undefined. Bạn không thể nối .map() sau nó.
• Bạn không thể dùng break để thoát sớm khỏi forEach. Nếu cần dừng sớm, dùng for...of hoặc some/every.

Nếu thấy mình đang viết arr.forEach(x => results.push(transform(x))), đó thực ra là một map.

find và findIndex: chỉ cần một phần tử

find trả về phần tử đầu tiên khớp với vị từ, hoặc undefined nếu không có phần tử nào khớp. findIndex trả về chỉ số (hoặc -1).

const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Boris" },
    { id: 3, name: "Chen" },
];

const boris = users.find(u => u.name === "Boris");
const borisIndex = users.findIndex(u => u.name === "Boris");

console.log(boris);
console.log(borisIndex);

find dừng lại ở lần khớp đầu tiên. Đừng dùng filter(...)[0]: cách đó quét toàn bộ mảng chỉ để vứt đi phần còn lại.

some và every: những câu hỏi boolean

some trả về true nếu có ít nhất một phần tử vượt qua phép kiểm tra. every chỉ trả về true khi tất cả đều vượt qua.

const scores = [82, 91, 77, 64, 88];

console.log(scores.some(s => s >= 90));   // true - at least one A
console.log(scores.every(s => s >= 60));  // true - nobody failed
console.log(scores.every(s => s >= 80));  // false

Cả hai đều dừng sớm (short-circuit): some dừng ở true đầu tiên, every dừng ở false đầu tiên. Chúng là công cụ phù hợp cho các câu hỏi "có phần tử nào…" và "tất cả có…".

slice và splice: sao chép hay cắt

Hai phương thức này nghe giống nhau nhưng làm những việc rất khác nhau.

slice(start, end) trả về một bản sao nông của một phần mảng. Nó không sửa đổi gì cả. end không được tính vào; bỏ nó đi để lấy đến hết mảng.

const letters = ["a", "b", "c", "d", "e"];

const middle = letters.slice(1, 4);
const last = letters.slice(-2);

console.log(middle);
console.log(last);
console.log(letters);  // unchanged

splice(start, deleteCount, ...items) sửa trực tiếp mảng tại chỗ. Nó xóa deleteCount phần tử bắt đầu từ start, có thể chèn thêm phần tử mới, rồi trả về các phần tử đã xóa.

const letters = ["a", "b", "c", "d", "e"];

const removed = letters.splice(1, 2, "X", "Y", "Z");

console.log(letters);   // ["a", "X", "Y", "Z", "d", "e"]
console.log(removed);   // ["b", "c"]

Mẹo nhớ: slice thì an toàn (sao chép), splice thì phẫu thuật mảng ngay tại chỗ.

Sửa mảng gốc và không sửa mảng gốc

Sự phân biệt này rất quan trọng. Code vô tình sửa một mảng đang được dùng chung là một trong những bug khó chịu nhất khi phải truy tìm.

Sửa mảng gốc (thay đổi mảng ban đầu, thường trả về thứ khác):

• push, pop, shift, unshift
• splice, sort, reverse
• fill, copyWithin

Không sửa mảng gốc (trả về mảng hoặc giá trị mới, mảng ban đầu giữ nguyên):

• map, filter, slice, concat
• flat, flatMap
• find, findIndex, some, every, includes, indexOf
• reduce, reduceRight

Hai phương thức cần để ý là sort và reverse: trông vô hại nhưng lại âm thầm sửa mảng. Nếu cần một bản sao đã sắp xếp, hãy slice trước:

const nums = [3, 1, 4, 1, 5];

const sorted = nums.slice().sort((a, b) => a - b);

console.log(sorted);
console.log(nums);  // unchanged

JS hiện đại còn có các phiên bản song sinh không sửa mảng gốc: toSorted, toReversed, toSpliced và with. Chúng trả về mảng mới và để nguyên mảng gốc. Mọi môi trường chạy hiện nay đều hỗ trợ, nên có thì cứ dùng.

const nums = [3, 1, 4, 1, 5];

console.log(nums.toSorted((a, b) => a - b));
console.log(nums.toReversed());
console.log(nums);  // still [3, 1, 4, 1, 5]

flat và flatMap

flat làm phẳng mảng lồng nhau một cấp (hoặc nhiều hơn, với đối số độ sâu). flatMap là map rồi đến flat một cấp, hữu ích khi mỗi phần tử cho ra không hoặc nhiều đầu ra.

const nested = [[1, 2], [3, 4], [5]];
console.log(nested.flat());

const sentences = ["hello world", "how are you"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words);

flatMap là cách gọn gàng để "bung" các phần tử, một đầu vào thành nhiều đầu ra, mà không cần thêm bước flat().

Kết hợp tất cả

Một ví dụ nhỏ sát với thực tế. Từ một danh sách đơn hàng, tính tổng doanh thu của các đơn đã hoàn tất có giá trị trên $50:

const orders = [
    { id: 1, total: 120, status: "completed" },
    { id: 2, total: 30, status: "completed" },
    { id: 3, total: 200, status: "pending" },
    { id: 4, total: 75, status: "completed" },
    { id: 5, total: 45, status: "completed" },
];

const revenue = orders
    .filter(o => o.status === "completed")
    .filter(o => o.total > 50)
    .reduce((sum, o) => sum + o.total, 0);

console.log(revenue);

Ba phương thức, một pipeline, không cần lo chuyện quản lý vòng lặp. Mỗi bước tự mô tả việc nó làm. Bạn có thể gộp hai lời gọi filter làm một, nhưng tách riêng vẫn dễ đọc và đôi khi giúp ích khi bạn gỡ lỗi.

Tiếp theo: Map và Set

Mảng xử lý tốt các dãy có thứ tự, nhưng lại vụng về khi bạn cần tra cứu nhanh theo khóa hoặc một tập hợp các giá trị không trùng lặp. JavaScript có hai cấu trúc dữ liệu dựng sẵn cho đúng những việc đó, là Map và Set, và chúng là nội dung của trang tiếp theo.