JavaScript Array: map()

Czytając ten artykuł, dowiesz się, do czego służy metoda map() w JS. Ponadto poznasz ciekawe przykłady oraz dobre praktyki dot. metody Array.prototype.map().

Do czedo służy Array.prototype.map()?

Metoda map() jest metodą dostępną dla wszystkich obiektów typu Array czyli tablic. Działanie metody map() polega na przetworzeniu każdego elementu tablicy przy użyciu funkcji przekazanej jako argument do metody map(). W wyniku działania metody map() otrzymujesz nową tablicę.

W skrócie. Dzięki metodzie map() możesz wykonać konkretne działanie na każdym elemencie tablicy a w wyniku otrzymać nową tablicę ze zmodyfikowanymi elementami.

Składnia metody map() w JS

Składnia metody Arra.prototype.map() wygląda następująco:

array.map(function(currentValue, index, arr), thisValue)

• function(currentValue, index, arr) – jest funkcją, która jest wywoływana dla każdego elementu tablicy. Funkcja ta przyjmuje trzy argumenty:
  • currentValue – bieżąca wartość elementu w tablicy
  • index – indeks bieżącego elementu
  • arr – tablica, dla której metoda map() jest wywoływana
• thisValue (opcjonalnie) – jest wartością, która będzie używana jako this wewnątrz funkcji.

Metoda map() zwraca nową tablicę, która zawiera elementy przekształcone przez funkcję.

Przykłady użycia map()

? Analizowanie kodu jest świetnym sposobem na naukę i rozwijanie swoich umiejętności programistycznych. Dzięki temu, możesz poznać różne sposoby rozwiązywania problemów i zrozumieć jak działają różne metody i funkcje. Analizując kod z przykładów, będziesz lepszym programistą, będziesz w stanie szybciej i efektywniej rozwiązywać problemy oraz pisać bardziej czytelny i efektywny kod.

Obliczenie kwadratów liczb w tablicy

Zadanie jest proste. Musimy napisać kod, który tworzy nową tablicę w której znajdują się liczby z tablicy bazowej podniesione do kwadratu.

Zrwóć uawgę, że jako argument przekazaliśmy funkcję strzałkową x => x * x

const liczby = [1, 2, 3, 4];
const kwadraty = liczby.map(x => x * x);
// kwadraty to teraz [1, 4, 9, 16]

Zmiana tablicy stringów na tablicę z dużymi literami

Kolejny ciekawy przykład. Zamień wszystkie stringi w tablicy na stringi pisane wielkimi literami.

const imiona = ['ala', 'ola', 'ela'];
const duzeImiona = imiona.map(imie => imie.toUpperCase());
// duzeImiona to teraz ['ALA', 'OLA', 'ELA']

Zmiana tablicy obiektów na tablicę ich właściwości

W tym przykładzie naszym celem jest stworzenie nowej tablicy, która zawiera jedynie część informacji z obiektów, które znajdują się w tablicy bazowej. Musimy stworzyć tablicę, która zawiera jedynie wiek.

const osoby = [
  { imie: 'Anna', wiek: 32 },
  { imie: 'Paweł', wiek: 28 },
  { imie: 'Kasia', wiek: 35 }
];
const wieki = osoby.map(osoba => osoba.wiek);
// wieki to teraz [32, 28, 35]

Dobre praktyki stosowania metody Array map() w JS

Poniżej znajdują się wskazówki i dobre praktyki, które możesz stosować podczas pisania kodu JavaScript. Zapoznaj się z nimi.

1. Używaj metody map() tylko wtedy, gdy chcesz stworzyć nową tablicę z elementami zmienionymi przez podaną funkcję.
2. Pamiętaj, że metoda map() nie zmienia oryginalnej tablicy, tylko tworzy nową.
3. Upewnij się, że funkcja przekazywana do map() jest czytelna i prosta, ponieważ będzie ona wywoływana dla każdego elementu tablicy.
4. Pamiętaj, że metoda map() nie działa na tablicach z pustymi indeksami.
5. Unikaj używania metody map() dla dużych tablic, ponieważ może to spowodować spowolnienie działania aplikacji.
6. Jeśli potrzebujesz filtrować tablicę, użyj metody filter() zamiast map().