JavaScript für In


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Die For In-Schleife

Die JavaScript-Anweisung for in durchläuft die Eigenschaften eines Objekts:

Syntax

for (key in object) {
  // code block to be executed

}

Beispiel

const person = {fname:"John", lname:"Doe", age:25};

let text = "";
for (let x in person) {
  text += person[x];
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For In Loop</h2>
<p>The for in statement loops through the properties of an object:</p>

<p id="demo"></p>

<script>
const person = {fname:"John", lname:"Doe", age:25}; 

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Beispiel erklärt

  • Die for in-Schleife durchläuft ein Person-Objekt

  • Jede Iteration gibt einen Schlüssel (x) zurück.

  • Der Schlüssel wird verwendet, um auf den Wert des Schlüssels zuzugreifen

  • Der Wert des Schlüssels ist person[x]


Für In über Arrays

Die JavaScript-Anweisung for in kann auch eine Schleife über die Eigenschaften eines Arrays durchführen:

Syntax

for (variable in array) {
  code
}

Beispiel

const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x];
 
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>For In Loops</h2>
<p>The for in statement can loops over array values:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x] + "<br>"; 
}

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Verwenden Sie for in nicht für ein Array, wenn die Index-Reihenfolge wichtig ist.

Die Indexreihenfolge hängt von der Implementierung ab und der Zugriff auf Array-Werte erfolgt möglicherweise nicht in der erwarteten Reihenfolge.

Es ist besser, eine for-Schleife, eine for of-Schleife oder Array.forEach() zu verwenden, wenn die Reihenfolge wichtig ist.



Array.forEach()

Die Methode forEach() ruft einmal für jedes Array-Element eine Funktion (eine Rückruffunktion) auf.

Beispiel

const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
   
txt += value;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>

<p>Call a function once for each array element:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt += value + "<br>"; 
}
</script>

</body>
</html>

Beachten Sie, dass die Funktion drei Argumente benötigt:

  • Der Artikelwert

  • Der Artikelindex

  • Das Array selbst

Das obige Beispiel verwendet nur den Wertparameter. Es kann wie folgt umgeschrieben werden:

Beispiel

const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
   
txt += value; 
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>

<p>Call a function once for each array element:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt += value + "<br>"; 
}
</script>

</body>
</html>