Pętla for() na 4 sposoby – czy wiesz jak z nich korzystać?

for()

Pętla for jest jednym z najczęściej, o ile nie najczęstszym, sposobem iterowania w JS. Korzysta się z niej szczególnie tam, gdzie potrzebna jest dokładna kontrola nad przebiegiem iteracji.

Iterowanie po tablicy

const numbers = [1, 5, 10, 15];
for (let i = 0, max = numbers.length; i < max; i++) {
  console.log(numbers[i]);
}

Iteracja po obiekcie

const author = {
  firstName: 'Marcin',
  lastName: 'Wanke',
  age: 39,
  role: 'Frontend Developer'
};

const keys = Object.keys(author);

for (let i = 0, max = keys.length; i < max; i++) {
  const key = keys[i];
  console.log(`${key}: ${person[key]}`)
}

/*Wynik:

firstName: Marcin
lastName: Wanke
age: 39
role: Frontend Developer

*/

Pętlę for możemy też użyć  do sumowania elementów tablicy, do ich modyfikowania, do generowania ciągu liczb. Pole zastosowań jest naprawdę szerokie.

Sumowanie elementów tablicy.

 

Modyfikowanie elementów tablicy

 

Generowanie ciągu liczb

 

Przerwanie pętli

Każdą pętlę for (dotyczy to więc również for…of, for…in) można przerwać za pomocą instrukcji break. Możemy też pominąć daną iterację za pomocą continue 

const numbers = [1, 5, 10, 15];
for (let i = 0, max = numbers.length; i < max; i++) {
  if (numbers[i] === 5) continue; // pominięcie iteracji, gdy element tablicy będzie wynosił 5
  console.log(numbers[i]);
}

/*Wynik: 

1
10
15

*/
const numbers = [1, 5, 10, 15];
for (let i = 0, max = numbers.length; i < max; i++) {
  if (numbers[i] === 10) break; // przerwanie pętli, gdy wartość number w danej iteracji będzie wynosiła 10
  console.log(numbers[i]);
}

/*Wynik:

1
5

*/

for…of

Jeśli zależy nam na prostym iterowaniu po wartościach iterowalnego obiektu (tablice, ciągi znaków, mapy, zbiory (Set), argumenty funkcji) możemy użyć pętli for…of.

Iteracja po tablicy

const numbers = [1, 5, 10, 15];
for (const number of numbers) {
  console.log(number);
}
/*Wynik: 

1
5
10
15

*/

Iteracja po ciągu znaków

const text = 'Hello World';
for (const char of text) {
  console.log(char);
}
/*Wynik: 

H
e
l
l
o

W
o
r
l
d

*/

Iteracja po mapie

const author = new Map();
author.set('firstName', 'Marcin');
author.set('lastName', 'Wanke');
author.set('age', 39);

for (const [key, value] of author) {
  console.log(key, value);
}

/*Wynik: 

firstName Marcin
lastName Wanke
age 39

*/

Iteracja po zbiorze (Set)

const set = new Set([1, 5, 10, 15]);
for (const value of set) {
  console.log(value);
}
/* Wynik: 

1
5
10
15

*/

Iteracja po argumentach funkcji

function introduceYourself() {
  for (const argument of arguments) {
    console.log(argument);
  }
}

//Powyższe możemy również uzyskać korzystając z operatora spreat:

function introduceYourself(...args) {
  for (const argument of args) {
    console.log(argument);
  }
}

introduceYourself('Marcin', 'Wanke', 39, { role: 'Frontend Developer' });
/*Wynik: 

Marcin
Wanke
39 
{role: 'Frontend Developer'}

*/

for…in

Pętla iteruje po kluczach obiektu. Jest szczególnie przydatna, gdy chcemy przejrzeć wszystkie właściwości obiektu (w tym te dziedziczone z prototypu (chyba, że używamy Object.hasOwnProperty)) i zarządzać nimi dynamicznie.

Iteracja po właściwościach obiektu

const author = {
  firstName: "Marcin",
  lastName: "Wanke",
  age: 39
};

for (const key in author) {
  console.log(`${key}: ${author[key]}`);
}

/*Wynik:

firstName: Marcin
lastName: Wanke
age: 39

*/

Iteracja po indeksach tablicy

Pętla for…in nie iteruje po wartościach tablicy, a jedynie po jej indeksach. Do iterowania po wartościach lepiej użyć pętli for lub for…of

const numbers = [1, 5, 10, 15];
for (const index in numbers) {
  console.log(`Index: ${index}, Wartość: ${numbers[index]}`);
}

/* Wynik:
Index: 0, Wartość: 1
Index: 1, Wartość: 5
Index: 2, Wartość: 10
Index: 3, Wartość: 15
*/

Iteracja po właściwościach obiektu dziedziczącego z prototypu

 

Iteracja po właściwościach symbolicznych

 

for await…of

Pętla for await…of została wprowadzona w ES9 (ES 2018) jako rozwinięcie pętli for…of. Umożliwia ona iterację po asynchronicznych iterowalnych obiektach.

Składnia pętli wygląda nastepująco:

for await (const value of values) {
  //wykonywany kod
}

Iteracja po asynchronicznych generatorach

 

Iteracja po tablicy obietnic

 

Przetwarzanie żądań HTTP

 

Dlaczego warto korzystać z for await…of?

 

Polecane

Dodaj komentarz

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