Która z metod jest szybsza – map(), for() czy forEach()?

W JavaScript mamy do dyspozycji wiele różnych metod iteracji po tablicach. O ile w większości zastosowań nie musimy martwić się wydajnością i wybieramy tą metodę, która najlepiej nam pasuje, o tyle czasami – szczególnie przy obsłudze wielkiej ilości danych – musimy wziąć pod uwagę szybkość danej metody i wybrać tą najszybszą.

Pod lupę wziąłem trzy najpopularniejsze iteracyjne metody tablicowe – map(), for() czy forEach(). Która z nich jest szybsza? Do sprawdzenia wydajności wspomnianych metod, wykorzystałem poniższy kod:

const data = Array.from({ length: 1000000 }, (_, index) => index);

console.time('forEach');
const forEachData = [];
data.forEach(item => {
  forEachData.push(item * 2);
});
console.timeEnd('forEach');

console.time('map');
const mapData = data.map(item => item * 2);
console.timeEnd('map');

console.time('for');
const forData = [];
for (let i = 0; i < data.length; i++) {
  forData.push(data[i] * 2);
}
console.timeEnd('for');

W powyższym przykładzie w pierwszej linijce tworzymy tablicę data o długości 1000000 elementów, gdzie każdy element będzie kolejną liczbą naturalną, zaczynając od 0. Wykorzystaliśmy do tego metodę Array.from(), która tworzy w naszym przypadku tablicę o długości 1000000. Następnie korzystamy z funkcji strzałkowej (_, index) => index przekazanej jako drugi argument metody Array.from(). W tej funkcji chcemy skorzystać z drugiego parametru index, ale skoro musimy najpierw podać pierwszy parametr, to na jego miejsce wstawiamy _ (możemy wstawić cokolwiek, ale _ standardowo wstawiamy gdy chcemy pokazać, że z tej zmiennej nie będziemy korzystać).

Parametr index reprezentuje indeks aktualnie tworzonego elementu w tablicy. Funkcja zwraca index, co oznacza, że każdy element tablicy będzie miał wartość równą swojemu indeksowi.

Ostatecznie, kod ten tworzy tablicę o długości 1000000 elementów, gdzie każdy element będzie kolejną liczbą naturalną, zaczynając od 0.

Następnie, używając console.time() rozpoczynamy pomiar czasu przed wywołaniem metody map(), a po zakończeniu tej metody, używając console.timeEnd(), kończymy pomiar czasu i wyświetlamy wynik w konsoli.

Po wywołaniu powyższego kodu, w konsoli zobaczymy mniej więcej taki wynik:

forEach: 13.56298828125 ms
map: 10.148193359375 ms
for: 8.379150390625 ms

Trzeba mieć na uwadze, że z każdym odświeżeniem czas wykonania skryptu jest odrobinę inny, jednak metoda for() jest zawsze najszybsza, na drugim miejscu jest map(), najwolniej zaś działa forEach().

 

 

Polecane

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *