תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

לרוץ עם לולאה על אובייקטים של 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 כוכבים

 

 

המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.

למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

מהם שלוש רשויות השלטון בישראל?

 

תמונת המגיב

אוריאל בתאריך: 02.06.2020

תודה רבה מדריך מעולה!