Array.
Tworzy nową tablicę z wynikami wywołania funkcji dla każdego elementu.
- Zwraca
- Nową tablicę z wynikami funkcji, o tej samej długości co oryginał.
- Zmienia oryginał
- Nie
Przykład
#const numbers = [1, 2, 3, 4]
const doubled = numbers.map((n) => n * 2)
console.log(doubled)
console.log(numbers)Definicja i zastosowanie
#Metoda map() przechodzi po kolejnych elementach tablicy, wywołuje dla każdego podaną funkcję i z jej wyników buduje nową tablicę tej samej długości. Oryginalna tablica zostaje nietknięta.
To podstawowe narzędzie do przekształcania danych: zamiany cen na ceny z podatkiem, obiektów użytkowników na same imiona czy danych z API na elementy listy w interfejsie.
Jeśli nie potrzebujesz nowej tablicy, a chcesz tylko coś zrobić dla każdego elementu (na przykład wypisać go w konsoli), użyj forEach(). Używanie map() bez korzystania z wyniku to częsty błąd.
Składnia
#array.map(callbackFn)
array.map(callbackFn, thisArg)Parametry
#callbackFn
function (element, index, array)
Funkcja wywoływana dla każdego elementu. Dostaje bieżący element, jego indeks i całą tablicę. To, co zwróci, trafia do nowej tablicy.thisArg
opcjonalny
Wartość używana jakothiswewnątrzcallbackFn. Przy funkcjach strzałkowych nie ma znaczenia.
Więcej przykładów
#const students = [
{ name: 'Ania', points: 120 },
{ name: 'Kuba', points: 95 },
{ name: 'Ola', points: 140 }
]
const names = students.map((student) => student.name)
console.log(names)const tasks = ['HTML', 'CSS', 'JavaScript']
const numbered = tasks.map((task, index) => `${index + 1}. ${task}`)
console.log(numbered.join('\n'))console.log(['1', '2', '3'].map(parseInt))
console.log(['1', '2', '3'].map(Number))map() przekazuje do funkcji także indeks, a parseInt traktuje drugi argument jako podstawę systemu liczbowego. Stąd NaN. Bezpieczniej użyć Number albo (s) => parseInt(s, 10).
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Funkcja przekazana do
map()powinna zwracać wartość. Zapomnianyreturnw nawiasach klamrowych da tablicę pełnąundefined. - Nie zmieniaj oryginalnych obiektów wewnątrz
map(). Zwracaj nowe:{ ...user, active: true }.
Powiązane hasła
#- Array.prototype.filter()Tworzy nową tablicę z elementami, dla których funkcja zwróciła true.
- Array.prototype.forEach()Wywołuje funkcję dla każdego elementu tablicy.
- Array.prototype.reduce()Sprowadza całą tablicę do jednej wartości, np. sumy, obiektu lub nowej tablicy.
- Array.prototype.flatMap()Mapuje każdy element i spłaszcza wynik o jeden poziom.
Widzisz błąd albo brakuje przykładu? Napisz do nas.