JavaScript sisään

Sisällysluettelo

    Näytä sisällysluettelo

For In -silmukka

JavaScript for in -käsky käy läpi objektin ominaisuudet:

Syntaksi

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

}

Esimerkki

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

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

Kokeile itse →

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

Esimerkki selitetty

  • for in -silmukka toistuu person -objektin yli

  • Jokainen iteraatio palauttaa avaimen (x)

  • Avainta käytetään avaimen arvon lukemiseen

  • Avaimen arvo on henkilö[x]

In Over Arrays

JavaScript for in -käsky voi myös kiertää taulukon ominaisuuksien yli:

Syntaksi

for (variable in array) {
  code
}

Esimerkki

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

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

Kokeile itse →

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

Älä käytä arvoa for in taulukon yli, jos hakemiston järjestys on tärkeä.

Indeksin järjestys on toteutuksesta riippuvainen, ja taulukon arvoja ei ehkä voida käyttää odottamassasi järjestyksessä.

On parempi käyttää silmukkaa for, for of tai Array.forEach(), kun järjestys on tärkeä.

Array.forEach()

Metodi forEach() kutsuu funktiota (takaisinkutsufunktiota) kerran kullekin taulukon elementille.

Esimerkki

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

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

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

Kokeile itse →

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

Huomaa, että funktiolla on 3 argumenttia:

  • Tuotteen arvo

  • Tavaran indeksi

  • Itse sarja

Yllä oleva esimerkki käyttää vain arvoparametria. Se voidaan kirjoittaa uudelleen muotoon:

Esimerkki

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

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

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

Kokeile itse →

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