for...of i for...in w JavaScript: pętle po tablicach i obiektach

Dwie pętle, dwa różne zadania

JavaScript ma dwie formy pętli, które wyglądają niemal identycznie, ale robią zupełnie co innego. for...of przechodzi po wartościach obiektu iterowalnego. for...in przechodzi po kluczach obiektu. Jedno słowo różnicy, kompletnie inne zachowanie.

Cała historia w jednym przykładzie:

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
    console.log(fruit);
}

for (const key in fruits) {
    console.log(key);
}

Pierwsza pętla wypisuje apple, banana, cherry, czyli wartości. Druga wypisuje 0, 1, 2, czyli klucze, i to jako stringi. Wybierz złą pętlę, a spędzisz dziesięć minut na zastanawianiu się, skąd w tablicy wzięły się same liczby.

for...of: wartości z dowolnego obiektu iterowalnego

for...of to pętla, po którą będziesz sięgać najczęściej. Działa na wszystkim, co JavaScript uważa za iterowalne: tablicach, stringach, Map, Set, NodeList, generatorach i nie tylko.

const scores = [92, 87, 73, 100];
let total = 0;

for (const score of scores) {
    total += score;
}

console.log("średnia:", total / scores.length);

Żadnego żonglowania indeksami, żadnego scores[i]. Prosisz o każdą wartość i dostajesz każdą wartość. Stringi też są iterowalne, więc for...of przechodzi po nich znak po znaku:

for (const char of "hi!") {
    console.log(char);
}

Działa to poprawnie także z większością punktów kodowych Unicode, co jest małą, ale realną przewagą nad odczytywaniem znaków stringa po numerze indeksu.

Indeks w pętli for...of

Jedyne, czego for...of nie daje bezpośrednio, to pozycja. Gdy jej potrzebujesz, połącz pętlę z entries():

const names = ["Rosa", "Boris", "Ada"];

for (const [index, name] of names.entries()) {
    console.log(`${index}: ${name}`);
}

names.entries() zwraca pary [index, value], a destrukturyzacja po lewej stronie rozdziela je na dwie zmienne. Zwykle wychodzi to czyściej niż powrót do klasycznego for (let i = 0; ...) tylko dlatego, że potrzebujesz i.

for...in: klucze obiektu

for...in powstała z myślą o zwykłych obiektach. Iteruje po wyliczalnych kluczach typu string:

const user = {
    name: "Rosa",
    age: 30,
    city: "Lisbon",
};

for (const key in user) {
    console.log(key, "->", user[key]);
}

Zauważ, że dostajesz klucz, a nie wartość. Żeby odczytać wartość, sięgasz z powrotem do obiektu przez user[key]. Każdy klucz jest stringiem, nawet jeśli wygląda jak liczba.

for...in przechodzi też w górę łańcucha prototypów, więc może wyciągnąć dziedziczone właściwości. Przy własnych literałach obiektów rzadko ma to znaczenie, ale przy iterowaniu po instancjach klasy albo obiektach z biblioteki warto się zabezpieczyć:

const user = { name: "Rosa", age: 30 };

for (const key in user) {
    if (Object.hasOwn(user, key)) {
        console.log(key, user[key]);
    }
}

Object.hasOwn(user, key) pomija wszystko, co odziedziczone. W nowoczesnym kodzie większość osób w ogóle unika for...in i zamiast tego używa Object.keys, Object.values lub Object.entries. O tym jest następna sekcja.

Nowoczesny sposób na pętlę po obiekcie

Zamiast for...in połącz for...of z jednym z pomocników Object.*. Wybierasz ten, który pasuje do tego, czego potrzebujesz:

const user = { name: "Rosa", age: 30, city: "Lisbon" };

for (const key of Object.keys(user)) {
    console.log("klucz:", key);
}

for (const value of Object.values(user)) {
    console.log("wartość:", value);
}

for (const [key, value] of Object.entries(user)) {
    console.log(`${key} = ${value}`);
}

Object.entries jest szczególnie wygodne: destrukturyzacja pary [key, value] czyta się jak zwykłe zdanie. A ponieważ te metody zwracają tylko własne, wyliczalne właściwości obiektu, nie musisz się martwić dziedziczonymi śmieciami.

Nie używaj for...in na tablicach

Technicznie jest to dozwolone, ale łatwo się na tym potknąć:

const nums = [10, 20, 30];
nums.tag = "scores";

for (const key in nums) {
    console.log(key);
}

Dostajesz 0, 1, 2 oraz tag. Każda właściwość, którą ktokolwiek dopisał do tablicy albo do Array.prototype przez polyfill, też się pojawi. Klucze są stringami, więc key + 1 skleja tekst zamiast dodawać. A kolejność iteracji nie we wszystkich przypadkach brzegowych musi się zgadzać z kolejnością w tablicy.

Praktyczna zasada:

• Wartości tablicy? for...of arr.
• Indeks i wartość tablicy? for...of arr.entries().
• Sam indeks, do liczenia? Klasyczne for (let i = 0; i < arr.length; i++).
• Klucze lub pary obiektu? Object.keys(obj) / Object.entries(obj) z for...of.

W skrócie: for...in to narzędzie niszowe. for...of razem z pomocnikami Object pokrywa wszystko, czego potrzebujesz.

break i continue działają w obu pętlach

Obie pętle obsługują standardowe sposoby wcześniejszego wyjścia:

const numbers = [1, 2, 3, 4, 5, 6];

for (const n of numbers) {
    if (n % 2 === 0) continue;
    if (n > 4) break;
    console.log(n);
}

continue przeskakuje do następnej iteracji, break całkowicie kończy pętlę. To główny powód, by wybierać for...of zamiast .forEach(): z callbacków forEach nie da się wyjść przez break, a z for...of owszem.

Podsumowanie obok siebie

const arr = ["a", "b", "c"];
const obj = { x: 1, y: 2, z: 3 };

// Values of an array:
for (const v of arr) console.log(v);         // a, b, c

// Index and value of an array:
for (const [i, v] of arr.entries()) console.log(i, v);

// Keys of an object:
for (const k of Object.keys(obj)) console.log(k);

// Key and value of an object:
for (const [k, v] of Object.entries(obj)) console.log(k, v);

Cztery pętle, cztery zadania, jeden model myślowy: jeśli chcesz wartości z czegoś iterowalnego, użyj for...of. Jeśli chcesz pracować z właściwościami obiektu, przejdź przez Object.keys / Object.values / Object.entries, również z for...of. for...in zostaw na rzadki przypadek, w którym naprawdę chcesz każdy wyliczalny klucz typu string obiektu, dziedziczony czy nie.

Dalej: wartości truthy i falsy

Każda pętla i każdy if w JavaScript w końcu zadaje to samo pytanie: czy ta wartość jest uznawana za prawdziwą? Odpowiedź nie zawsze jest oczywista: pusty string, zero, null i undefined zachowują się inaczej, niż można by się spodziewać. Następne w kolejce są wartości truthy i falsy.