לרוץ עם לולאה על אובייקטים של JavaScript

אחרי שבמדריך קודם למדנו על אובייקטים של JavaScript. במדריך זה נלמד איך לרוץ עם לולאה על אובייקטים של .JavaScript

במדריך קודם למדנו שלאובייקט של JavaScript יכולים להיות תכונות וערכים. לדוגמה, זה האובייקט car ויש לו 3 תכונות:

var car = {
model: "BMW", 
wheels: 4,
hasSunroof: true
}

אם תנסה להריץ לולאת for רגילה על האובייקט:

for(var x=0; x < car.length; x++){
   // do something
}

תגלה שיש בעיה.

והסיבה לבעיה היא שהתכונה length לא מוגדרת עבור אובייקטים.

console.log(car.length)

ולפיכך התוצאה היא:

undefined

אז איך נוכל להריץ לולאה על אובייקט? לשם כך, נשתמש בלולאה מסוג מיוחד, לולאת for...in

התחביר מאוד פשוט:

for (var prop in obj){
  // do something
}

בכל פעם שהלולאה רצה על האובייקט obj היא שולפת ממנו את התכונה התורנית prop.

נריץ את הלולאה על הדוגמה שלנו, האובייקט car:

for(var prop in car){
 console.log(prop)
}

התוצאה:

model
wheels
hasSunroof

בכל פעם שהלולאה רצה המשתנה prop מקבל את הערך של התכונה התורנית, ולכן התוצאה היא רשימת התכונות של האובייקט.

אבל כיצד נשלוף את הערכים המשויכים לתכונות?

במדריך על אובייקטים של JavaScript ראינו שכדי לשלוף ערך אנחנו יכולים להשתמש בתחביר הבא:

car.model

כדי לשלוף את הערך של התכונה ששמה model מהאובייקט car.

את אותו הדבר אנחנו יכולים לעשות באמצעות סוגריים מרובעים:

car["model"]

ואם היינו מגדירים את שם התכונה באמצעות משתנה אז היינו עושים את זה כך:

var prop = "model"
car[prop]

שימו לב! אי אפשר להשתמש בתחביר עם הנקודה בגלל ש-prop הוא משתנה ולא מחרוזת.

התחביר עם הסוגריים המרובעים נראה אולי פחות אלגנטי, אבל מאפשר לנו לשלוף ערכים באופן דינמי בתוך הלולאה:

for(var prop in car){
 console.log(car[prop]);
}

בכל פעם שהלולאה רצה הערך של המשתנה prop משתנה לשמה של התכונה התורנית, והתוצאה היא רשימת הערכים של האובייקט car:

BMW
4
true

נריץ עכשיו את הלולאה עם קוד המאפשר לנו לראות את תכונות וערכי האובייקט ביחד:

for(var prop in car){
 console.log(prop, " = ", car[prop]);
}

model  =  BMW
wheels  =  4
hasSunroof  =  true

לסיכום, כשאתה רוצה להריץ לולאה על אובייקט אתה צריך להשתמש בלולאת for...in

לולאת for...in ומערכים

עד כה ראינו שניתן להשתמש בלולאת for...in על אובייקטים, וזה גם השימוש העיקרי שלה, אבל ניתן להשתמש בה גם על מערכים. לדוגמה:

models = ["BMW", "Audi", "Tesla", "Sussita"];

for(var idx in models){
 console.log(idx, " is ", models[idx]);
}

0 is BMW
1 is Audi
2 is Tesla
3 is Sussita

ההבדל הוא שהמפתחות הם מספרי האינדקס. וכמו תמיד בתכנות, מתחילים מאינדקס 0 המאפשר לשלוף את הפריט הראשון ברשימה, ואחריו אינדקס 1 ששולף את הפריט השני, וכיו"ב.

מדריכי JavaScript

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים