JavaScript για In

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Ο βρόχος For In

Η πρόταση JavaScript for in περιστρέφεται μέσω των ιδιοτήτων ενός Αντικειμένου:

Σύνταξη

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

}

Παράδειγμα

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

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα Επεξήγηση

  • Ο βρόχος for in επαναλαμβάνεται πάνω από ένα αντικείμενο πρόσωπο

  • Κάθε επανάληψη επιστρέφει ένα κλειδί (x)

  • Το κλειδί χρησιμοποιείται για πρόσβαση στην τιμή του κλειδιού

  • Η τιμή του κλειδιού είναι πρόσωπο[x]

Για In Over Arrays

Η πρόταση JavaScript for in μπορεί επίσης να κάνει βρόχο στις ιδιότητες ενός πίνακα:

Σύνταξη

for (variable in array) {
  code
}

Παράδειγμα

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

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

Δοκιμάστε το μόνοι σας →

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

Μην χρησιμοποιείτε το for in σε έναν πίνακα εάν η σειρά του ευρετηρίου είναι σημαντική.

Η σειρά ευρετηρίου εξαρτάται από την υλοποίηση και οι τιμές του πίνακα ενδέχεται να μην είναι προσβάσιμες με τη σειρά που περιμένετε.

Είναι προτιμότερο να χρησιμοποιείτε έναν βρόχο for, έναν βρόχο for του ή Array.forEach() όταν η σειρά είναι σημαντική.

Array.forEach()

Η μέθοδος forEach() καλεί μια συνάρτηση (μια συνάρτηση επανάκλησης) μία φορά για κάθε στοιχείο πίνακα.

Παράδειγμα

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

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

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

Δοκιμάστε το μόνοι σας →

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

Σημειώστε ότι η συνάρτηση παίρνει 3 ορίσματα:

  • Η τιμή του στοιχείου

  • Το ευρετήριο του στοιχείου

  • Ο ίδιος ο πίνακας

Το παραπάνω παράδειγμα χρησιμοποιεί μόνο την παράμετρο τιμής. Μπορεί να ξαναγραφτεί σε:

Παράδειγμα

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

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

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

Δοκιμάστε το μόνοι σας →

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