JavaScript pro In

Obsah

    Zobrazit obsah

Smyčka For In

Příkaz for in JavaScriptu prochází vlastnosti objektu:

Syntax

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

}

Příklad

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

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

Zkuste to sami →

<!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>

Příklad vysvětlen

  • Smyčka for in iteruje přes objekt person

  • Každá iterace vrátí klíč (x)

  • Klíč se používá pro přístup k hodnotě klíče

  • Hodnota klíče je person[x]

Pro In přes pole

Příkaz for in JavaScriptu také může přepínat vlastnosti pole:

Syntax

for (variable in array) {
  code
}

Příklad

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

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

Zkuste to sami →

<!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>

Nepoužívejte for in přes pole, pokud je důležité pořadí indexu.

Pořadí indexu je závislé na implementaci a hodnoty pole nemusí být přístupné v očekávaném pořadí.

Je lepší použít cyklus for, for of nebo Array.forEach(), když je pořadí důležité.

Array.forEach()

Metoda forEach() volá funkci (funkci zpětného volání) jednou pro každý prvek pole.

Příklad

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

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

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

Zkuste to sami →

<!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>

Všimněte si, že funkce má 3 argumenty:

  • Hodnota položky

  • Index položky

  • Samotné pole

Výše uvedený příklad používá pouze parametr value. Lze jej přepsat na:

Příklad

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

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

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

Zkuste to sami →

<!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>