Pętle for...of i for…in

Pętla for...of

Pętle for...of i for...in oferują wygodne sposoby iteracji po elementach tablic i właściwościach obiektów w JavaScript. Obie pętle są używane do przeglądania, ale stosuje się je w różnych sytuacjach.

Pętla for...of

Pętla for...of jest przeznaczona do iteracji po obiektach iterowalnych (takich jak tablice, stringi, obiekty Set i Map). Umożliwia łatwe przeglądanie elementów kolekcji.

Składnia:

    
      for (let variable of iterable) {
        // kod, który wykona się dla każdego elementu
      }
    
  

Przykład:

    
      let array = [1, 2, 3, 4, 5];

      for (let value of array) {
        console.log(value);
      }

      // Wyjście: 1 2 3 4 5
    
  

Zastosowanie dla tablic

Pętla for...of jest wygodna do przeglądania elementów tablicy, ponieważ zapewnia dostęp do wartości każdego elementu:

    
      let fruits = ['apple', 'banana', 'cherry'];

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

      // Wyjście: apple banana cherry
    
  

Zastosowanie dla stringów

Pętlę for...of można również używać do iteracji po znakach w stringu:

    
      let str = 'Hello';

      for (let char of str) {
        console.log(char);
      }

      // Wyjście: H e l l o
    
  

9.2 Pętla for...in

Pętla for...in jest używana do iteracji po właściwościach wyliczalnych obiektu. Przegląda klucz każdego z właściwości.

Składnia:

    
      for (let key in object {
        // kod, który wykona się dla każdego elementu
      }
    
  

Przykład:

    
      let obj = {a: 1, b: 2, c: 3};

      for (let key in obj) {
        console.log(key + ': ' + obj[key]);
      }

      // Wyjście: a: 1 b: 2 c: 3
    
  

Zastosowanie dla obiektów

Pętla for...in jest wygodna do przeglądania właściwości obiektu, ponieważ zapewnia dostęp do klucza i wartości każdego z właściwości:

    
      let user = {
        name: 'John',
        age: 30,
        isAdmin: true
      };

      for (let key in user) {
        console.log(key + ': ' + user[key]);
      }

      // Wyjście: name: John age: 30 isAdmin: true
    
  

Zastosowanie dla tablic

Pętla for...in może być używana do iteracji po indeksach tablicy, ale nie jest to zalecane, ponieważ iteruje po wszystkich właściwościach wyliczalnych, w tym właściwościach z prototypu:

    
      let array = ['apple', 'banana', 'cherry'];

      for (let index in array) {
        console.log(index + ': ' + array[index]);
      }

      // Wyjście: 0: apple 1: banana 2: cherry
    
  

9.3 Porównanie pętli for...of i for...in

Porównanie pętli for...of i for...in: