Metody tablic w JavaScript: map, filter, reduce i inne

Tablice mają własny zestaw narzędzi

Tablice w JavaScript mają mnóstwo wbudowanych metod. Prawie wszystko, do czego zwykle pisze się pętlę for (przekształcanie wartości, wybieranie części z nich, sumowanie), ma metodę, która robi to w jednej linii, czyta się lepiej i łatwo łączy z innymi.

Zestaw startowy to trzy metody: map, filter i reduce. Opanuj je razem z kilkoma krewnymi, a kod pełen pętli skurczy się do czegoś, co ogarniesz jednym spojrzeniem.

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);

Każda metoda przyjmuje callback i coś zwraca. Żadna z nich nie zmieniła nums: to zasada, którą warto przyswoić jak najwcześniej.

map: przekształć każdy element

map przyjmuje funkcję i wywołuje ją dla każdego elementu, zbierając zwrócone wartości w nowej tablicy o tej samej długości. Używaj jej, gdy chcesz "jeden wynik na każde wejście".

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 dostaje też indeks jako drugi argument, jeśli go potrzebujesz: arr.map((item, i) => ...). Gdy nie jest potrzebny, po prostu go pomiń.

Częsty błąd: sięganie po map, gdy zwrócona tablica nie jest potrzebna. Jeśli chcesz tylko wypisać każdy element albo zapisać go do bazy danych, to zadanie dla forEach albo zwykłej pętli.

filter: zostaw pasujące elementy

filter wywołuje predykat (funkcję zwracającą true lub false) dla każdego elementu i zostawia te, dla których wynik jest truthy. Nowa tablica ma tę samą długość albo jest krótsza.

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 i filter naturalnie łączą się w łańcuch. Czytaj go od lewej do prawej jak potok:

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);

Najpierw filtruj, potem mapuj: dzięki temu map działa tylko na elementach, które przeszły przez filtr.

reduce: sprowadź tablicę do jednej wartości

reduce to najbardziej ogólna z tych trzech metod. Podajesz jej funkcję redukującą (accumulator, item) => newAccumulator i wartość początkową. Metoda przechodzi przez tablicę, przekazuje każdy element do funkcji razem z dotychczasowym akumulatorem i zwraca to, czym akumulator stał się na końcu.

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);

Wynik nie musi być liczbą. Może być obiektem, inną tablicą, stringiem, czymkolwiek, co budujesz:

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);

Zawsze podawaj wartość początkową (drugi argument). Bez niej reduce bierze pierwszy element jako startowy akumulator, co psuje się na pustych tablicach i często i tak nie robi tego, czego chcesz.

reduce jest potężne, ale bywa trudne do czytania, gdy logika się komplikuje. Jeśli twoja funkcja redukująca ma więcej niż kilka linii, zwykła pętla for...of jest często czytelniejsza.

forEach: efekty uboczne, bez wartości zwracanej

forEach to jak map bez zwracanej tablicy. Istnieje po to, żeby zrobić coś z każdym elementem (zalogować go, wywołać API, zaktualizować DOM), gdy nie potrzebujesz nowej kolekcji.

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

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

Dwie rzeczy, które warto wiedzieć:

• forEach zwraca undefined. Nie da się po nim dołączyć .map().
• Nie możesz wcześniej wyjść z forEach przez break. Jeśli potrzebujesz wcześniejszego wyjścia, użyj for...of albo some/every.

Jeśli łapiesz się na pisaniu arr.forEach(x => results.push(transform(x))), to tak naprawdę jest map.

find i findIndex: tylko jeden, proszę

find zwraca pierwszy element spełniający predykat albo undefined, jeśli nic nie pasuje. findIndex zwraca indeks (albo -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 zatrzymuje się na pierwszym dopasowaniu. Nie używaj filter(...)[0]: przeszukuje całą tablicę tylko po to, żeby wyrzucić resztę.

some i every: pytania typu tak/nie

some zwraca true, jeśli przynajmniej jeden element przechodzi test. every zwraca true tylko wtedy, gdy przechodzą go wszystkie.

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

Obie metody przerywają działanie wcześniej: some zatrzymuje się na pierwszym true, every na pierwszym false. To właściwe narzędzie do pytań "czy którykolwiek…" i "czy wszystkie…".

slice vs splice: kopiowanie vs wycinanie

Te dwie nazwy brzmią podobnie, a robią zupełnie różne rzeczy.

slice(start, end) zwraca płytką kopię części tablicy. Niczego nie modyfikuje. end nie wchodzi do wyniku; pomiń go, żeby iść do końca tablicy.

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) modyfikuje tablicę w miejscu. Usuwa deleteCount elementów, zaczynając od start, opcjonalnie wstawia nowe i zwraca usunięte elementy.

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"]

Sposób na zapamiętanie: slice jest bezpieczne (kopiuje), splice precyzyjnie wycina i edytuje tablicę w miejscu.

Metody mutujące i niemutujące

To rozróżnienie ma znaczenie. Kod, który przypadkiem modyfikuje współdzieloną tablicę, to jeden z bardziej irytujących błędów do wytropienia.

Mutujące (zmieniają oryginał, zwykle zwracają coś innego):

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

Niemutujące (zwracają nową tablicę lub wartość, oryginał zostaje nietknięty):

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

Uważaj szczególnie na sort i reverse: wyglądają niewinnie, a po cichu modyfikują tablicę. Jeśli potrzebujesz posortowanej kopii, najpierw zrób slice:

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

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

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

Nowoczesny JS ma też niemutujące odpowiedniki: toSorted, toReversed, toSpliced i with. Zwracają nowe tablice i zostawiają oryginał w spokoju. Działają we wszystkich aktualnych środowiskach, więc korzystaj z nich, gdy tylko możesz.

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 i flatMap

flat spłaszcza zagnieżdżone tablice o jeden poziom (albo więcej, jeśli podasz argument głębokości). flatMap to map, po którym następuje jednopoziomowe flat: przydaje się, gdy każdy element daje zero lub więcej wyników.

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 to czysty sposób na "rozwinięcie" elementów (jedno wejście, wiele wyników) bez dodatkowego kroku flat().

Wszystko razem

Mały, realistyczny przykład. Mając listę zamówień, policz łączny przychód z zakończonych zamówień powyżej 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);

Trzy metody, jeden potok, zero ręcznego pilnowania pętli. Każdy krok opisuje, co robi. Można by połączyć oba wywołania filter, ale rozdzielone czytają się dobrze i czasem ułatwiają debugowanie.

Dalej: Map i Set

Tablice dobrze radzą sobie z uporządkowanymi sekwencjami, ale są niewygodne, gdy potrzebujesz szybkiego wyszukiwania po kluczu albo kolekcji unikalnych wartości. JavaScript ma do tego dwie wbudowane struktury danych, Map i Set, i to one są tematem następnej strony.