Iteracja po tablicy w Javascript

Wstęp

Język javascript pozwala na iterację po tablicy na naprawdę wiele sposobów. W tym artykule przedstawię ci najpopularniejsze z nich oraz omówię ich wady i zalety.

for

const tablica = ['a', 'b', 'c'];

for (let i = 0; i < tablica.length; i++) {
  console.log(tablica[i]); // wartość
  console.log(i); // indeks
}

Plusy:

• działa praktycznie wszędzie, nawet na najstarszych przeglądarkach (jeżeli zamiast const i let użyjesz var)
• można użyć break i continue (w celu zatrzymania iteracji)

Minusy:

• łatwo o pomyłkę (np. zamiast i < tablica.length wpisując i <= tablica.length)
• dużo możliwych wariantów implementacji tej samej funkcjonalności - zobacz poniżej

// Różne warianty użycia pętli for

const tablica = ['a', 'b', 'c'];

// Wersja główna (dla przypomnienia)
for (let i = 0; i < tablica.length; i++) {
  console.log(tablica[i]); // wartość
  console.log(i); // indeks
}

// Zmieniony warunek z i < tablica.length na i <= tablica.length - 1
for (let i = 0; i <= tablica.length - 1; i++) {
  console.log(tablica[i]); // wartość
  console.log(i); // indeks
}

// Zaczynami od i = 1
for (let i = 1; i <= tablica.length; i++) {
  console.log(tablica[i - 1]); // wartość
  console.log(i - 1); // indeks
}

// Też od i = 1, ale zmieniony warunek z i <= tablica.length na i < tablica.length + 1
for (let i = 1; i < tablica.length + 1; i++) {
  console.log(tablica[i - 1]); // wartość
  console.log(i - 1); // indeks
}

Jest powiedzenie "Od przybytku głowa nie boli!", jednak w kontekście programowania i pracy w większym zespole to powiedzenie nie ma zastosowania.

Z mojego doświadczenia wynika, że nadmiar możliwości prowadzi do braku spójności, a to z kolei prowadzi do ciężkiego bólu głowy 😉.

forEach

const tablica = ['a', 'b', 'c'];

tablica.forEach(function (item, index) {
  console.log(item); // wartość
  console.log(index); // indeks
})

// Wersja bez indeksu - jeśli nie potrzebujesz
// indeksu to możesz zwyczajnie go pominąć
tablica.forEach(function (item) {
  console.log(item); // wartość
})

Plusy:

• krótko i zwięźle
• ciężko o błąd

Minusy:

• nie można użyć break lub continue, co oznacza, że zawsze musimy przejść przez całą tablicę

for...of (ES6)

const tablica = ['a', 'b', 'c'];

for (const val of tablica) {
  console.log(val); // wartość
}

Plusy:

• można użyć break i continue
• nadal krótsze i mniejsza szansa na popełnienie błędu niż w przypadku zwykłej pętli for
• ma zastosowanie nie tylko dla tablic

Minusy:

• skoro ES6, to znaczy, że starsze przeglądarki nie obsłużą tej konstrukcji (chyba że użyjesz transkompilatora).

Nie używaj for...in !

Ta metoda została stworzona z myślą o obiektach. Pomimo, że działa także na tablicach, to lepiej jej unikać, gdyż:

• kolejność iteracji nie jest zagwarantowana
• odziedziczone właściwości również zostaną wzięte pod uwagę - zobacz przykład poniżej

const tablica = ['a', 'b', 'c'];
// ustawienie właściwości test na prototypie obiektu Array
// wyobraź sobie, że inny programista gdziekolwiek w kodzie
// dodał poniższą linię (niekoniecznie złośliwie)
Array.prototype.test = 'hello';

for (const val of tablica) {
  console.log(val); // wartość
}
// Zwróci: a, b, c

for (const key in tablica) {
  console.log(tablica[key]); // wartość
}
// Zwróci: a, b, c, hello

Podsumowanie

Który sposób jest najlepszy? Oczywiście zależy to od okoliczności, ale jako domyślny wybór zalecam:

1. forEach w przypadku gdy chcesz przejść przez całą zawartość tablicy (np. chcesz wyświetlić listę wszystkich uczniów)
2. for...of w przypadku gdy chcesz w pewnym momencie przerwać iterację (np. chcesz wyświetlić listę TOP 10 uczniów z najlepszą średnią ocen)
3. for tylko w przypadku gdy twój kod musi koniecznie działać na mocno już przestarzałych wersjach przeglądarek i nie używasz transkompilatora, który uzupełniałby brak wspracia dla for...of lub forEach

Iterację po tablicy masz już w małym palcu! Gratulacje!

A co jeśli najdzie cię potrzeba na iterację po obiekcie? Spokojnie, ten temat omówiłem w osobnym artykule: Iteracja po obiekcie w języku javascript.