JavaScript – iteracja po tablicach i obiektach w pętli for (in, of)

Zmienna value otrzymuje index stringa (licznik znaków począwszy od 0), dzięki temu przy zapisie someStr[value] otrzymamy dostęp do kolejnych znaków stringa. W przypadku, gdyby string zawierał spację na początku lub na końcu i chcielibyśmy się ich pozbyć można użyć funkcji .trim() jednak koniecznie jej użycie musi nastąpić przed pętlą.

var someStr = "text ".trim();
  for (var value in someStr) {
     console.log(someStr[value]);
  }

W tym wypadku sytuacja jest niemal identyczna jak to pokazałem powyżej na obiekcie string. Zmienna value otrzymuje index tablicy, dzięki temu przy zapisie array[value] otrzymamy dostęp do kolejnych znaków elementów tablicy. Poniższy zapis skraca wspomniany już klasyczny zapis for (var i=0; i < array.length; i++).

var array = ["123","car","cat","345"];
  for (var value in array) {
     console.log("Index in array: " + value + " = " + array[value]);
   }

Użycie for in ma jeszcze jedną istotną zaletę. W częściowo pustej tablicy uzyskamy dostęp do wszystkich elementów, które rzeczywiście mają przypisaną jakąś wartość z pominięciem elementów pustych. Efektem poniższego kodu będzie wypisanie do konsoli liczby 35, przy użyciu klasycznego zapisu (z array.length) otrzymamy w konsoli: undefined undefined undefined 35.

var array = [];
   array[3] = 35;
   for (var value in array) {
       console.log("Index in array: " + value + " = " + array[value]);
    }

Problem pojawi się jednak, gdy do tablic przypisany byłby jakiś prototyp – w takim wypadku on również pojawi się jako jeden z elementów tablicy. Po wywołaniu poniższego kodu w konsoli otrzymamy dwie wartości: 35, myFn = function() – zobaczyć to można na screenie na dole strony.

var array = ["123","car","cat","345"];
    Array.prototype.myFn = function() { 
        // zawartość funkcji
        }
    for (var value in array) {
	 console.log("Index in array: " + value + " = " + array[value]);
     }

if (typeof(array[value])!='function') {
           console.log("array:" + value + " = " + array[value]); 
      }

Użycie w pętli in na obiekcie iteruje po jego elementach, w zmiennej prop dla poniższego przykładu, są zapisywane „name”, „type”, „date”. Natomiast w zmiennej object „Jan”, „string”, „January” później w łatwy sposób uzyskujemy do elementów obiektu dostęp poprzez: object[prop].

var object = {name: "Jan", type:"string", date: "January"};
	for (var prop in object) {
		console.log("object:" + prop + " = " + object[prop]);
	}

Przedstawiając możliwości użycia of wewnątrz pętli for rozpocznę od iteracji po stringu. Efektem poniższego jest iteracja po poszczególnych elementach stringa czyli w konsoli uzyskamy t-e-x-t.

var someStr = " text";
        for (var value of someStr) {
	console.log(value);
   }

Użycie w pętli of powoduje przypisywanie w każdej iteracji elementu array do zmiennej value. Ewentualny prototyp przypisany do tablicy już się nie pojawi, jednak elementy tablicy częściowo pustej zostaną wyświetlone jako undefined. Odrzucenie elementów pustych umożliwia prosty warunek: if(value) {}

var array = [10, 20, 30];
  for (let value of array) {
      console.log(value);
  }