מאמר זה יספק לך הבנה מוצקה של אופן החזרה המדויק על פני מבנה נתוני מערך ב- JavaScript.
בין אם אתה רק מתחיל ללמוד JavaScript ובין אם אתה כאן לרענון, יהיה ערך בשבילך בכל מקרה. מאמר זה יוביל אותך דרך אחד ממושגי ה- JavaScript הנפוצים ביותר.
מהו מערך?
let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];למעלה מופיע מערך JavaScript המשמש לאחסון ערכים מרובים. זו אחת הצורות הפשוטות ביותר של מערך. הוא מכיל 4 "אלמנטים" בתוך המערך, כל המחרוזות. וכפי שאתה יכול לראות כל אלמנט מופרד בפסיק.
מערך דוגמה זה מכיל מכוניות שונות, וניתן להתייחס אליו באמצעות carsהמשתנה.
ישנן מספר דרכים בהן אנו יכולים לחזור על מערך זה. JavaScript הוא עשיר בתכונות להפליא, ולכן יש לנו את המותרות לבחור בדרך הטובה ביותר לפתור את הבעיה שלנו.
כך נתמודד עם איטרציה על מערכים ב- JavaScript:
- הדגש 5 שיטות נפוצות לחזור על מערך
- הראה כמה תובנות בכל שיטה איטרטיבית
- ספק קוד שאתה יכול להשתמש בו גם כדי לבדוק אותו!
מסורתי לולאה
מה זה For Loop?
ויקיפדיה מגדירה For Foroop כ:
"במדע המחשב, עבור לולאה (או פשוט עבור לולאה ) היא הצהרה בקרת זרימה לציון איטרציה, המאפשר קוד כדי להיות מוצא להורג שוב ושוב."לולאת for היא דרך לבצע קוד שוב ושוב. במקום להקליד console.log(“hi”)חמש פעמים, תוכל לעטוף אותו בתוך לולאת for.
בדוגמה ראשונה זו, נלמד כיצד לחזור על מערך המכוניות שראית לעיל, ולהדפיס כל אלמנט. האיטרטור, או הדלפק, יתחיל באינדקס הראשון "טסלה" ויסיים ב"אודי "האחרון. הוא עובר במערך ומדפיס אלמנט אחד בכל פעם.
let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"]; for(let i = 0; i < cars.length; i++) { console.log(cars[i]); }תְפוּקָה:
Tesla Ferrari Lamborghini Audiצולל לתוך הקוד, אנו מעבירים שלוש אפשרויות לולאת ה- for
- משתנה האיטרטור -
let i = 0; - איפה על האיטרטור לעצור -
i < card.length - כמה להגדיל את האיטרטור בכל לולאה -
i++
לולאה זו מתחילה אותנו ב 0, מגדילה את המשתנה אחד בכל לולאה, ועוצרת כאשר אנו פוגעים באלמנט האחרון במערך.
היתרון העיקרי של הלופ המסורתי הוא שיש לך שליטה רבה יותר.
ניתן לגשת לאלמנטים שונים במערך, או לחזור דרך המערך בצורה מתוחכמת כדי לפתור בעיה מורכבת. לדוגמה, דילוג על כל אלמנט אחר במערך יכול להיעשות די בקלות בעזרת הלולאה המסורתית.
שיטת forEach
מהי שיטת forEach?
forEachהשיטה משמשת לביצוע פונקציה עבור כל אלמנט של המערך שלך. שיטה זו היא בחירה מצוינת אם אורך המערך "לא ידוע", או מובטח שישתנה. ניתן להשתמש בשיטה זו רק עם מערכים, סטים ומפות.
const amounts = [65, 44, 12, 4]; let doubledAmounts = []; amounts.forEach(item => { doubledAmounts.push(item * 2); }) console.log(doubledAmounts);היתרון הגדול ביותר של forEachלולאה הוא האפשרות לגשת לכל פריט, גם אם המערך שלך עשוי לגדול בגודלו. זהו פתרון מדרגי עבור מקרי שימוש רבים וקל יותר לקרוא ולהבין מאשר לולאה מסורתית מכיוון שאנו יודעים שנחזור על כל אלמנט בדיוק פעם אחת.
תוך כדי לולאה
מה זה לולאת בזמן?
ויקיפדיה מגדירה לולאת זמן כ:
" לולאת זמן היא הצהרת זרימת בקרה המאפשרת לבצע קוד שוב ושוב בהתבסס על מצב בוליאני נתון. בעוד הלולאה יכולה להיחשב בחוויה חזר אם הצהרה. ”whileלולאה היא דרך לביצוע קוד שוב ושוב כדי לבדוק אם תנאי הוא אמת או שקר. לכן, במקום להשתמש בלולאת for, עם הצהרה מקוננת אם, אנו יכולים להשתמש בלולאת זמן. לחלופין, אם איננו מצליחים למצוא את אורך המערך, ואילו לולאות הן בחירה מצוינת.
לולאת בזמן נשלטת לעתים קרובות על ידי מונה. בדוגמה שלהלן אנו מציגים בסיסית תוך כדי לולאה החוזרת דרך מערך. המפתח הוא שליטה על לולאת הזמן שאתה יוצר.
דוגמת לולאה (טוב):
let i = 0 while (i < 5) { console.log(i); i++; }פלט :
0 1 2 3 4ההצהרה של אם לולאה היא i < 5, או נאמרת בקול רם, "אני פחות מ -5". המשתנה iמצטבר בכל פעם שהלולאה פועלת.
במילים פשוטות, משמעות הדבר היא כי נוסף 1 למשתנה iבכל פעם שהלולאה מבצעת איטרציה מלאה. באיטרציה הראשונה, iשווה ל 0, ואנחנו מדפיסים "0" למסוף.
הסיכון הגדול ביותר לשימוש בלולאת זמן הוא כתיבת תנאי שמעולם לא מתקיים.
זה קורה לעתים קרובות בתרחישים בעולם האמיתי, כאשר מישהו כותב לולאת זמן אבל שוכח לבדוק את הלולאה שלו, וזה מכניס לולאה אינסופית לבסיס הקוד.
לולאה אינסופית מתרחשת כאשר התנאי לעולם אינו מתקיים, והלולאה ממשיכה לפעול לנצח. לעיתים קרובות הדבר מביא לשבירת שינויים, מה שגורם ליישום התוכנה כולו להישבר ולהפסיק לעבוד.
אזהרה: אל תריץ קוד זה.
דוגמא לולאה אינסופית (רע):
let i = 0 while (i < 5) { console.log(i); }תְפוּקָה:
התוצאות עשויות להשתנות.
הלולאה לעשות בזמן
מה זה לעשות תוך לולאה?
ויקיפדיה מגדירה לולאת Do-While כ:
" לולאת לעשות בזמן היא הצהרת זרימת בקרה שמבצעת בלוק קוד לפחות פעם אחת , ואז מבצעת שוב ושוב את החסימה, או לא, תלוי במצב בוליאני נתון בסוף החסימה."לולאת לעשות בזמן זהה כמעט ללולאת זמן, אולם יש הבדל מפתח אחד. לולאת ה- do-while תבטיח לבצע תמיד את גוש הקוד לפחות פעם אחת לפני הצהרת ה- if.
לעתים קרובות אני חושב על זה כעל לולאה הפוכה וכמעט אף פעם לא משתמש בהם. עם זאת, הם מועילים בכמה תרחישים ספציפיים מאוד.
דוגמה לולאה (טוב):
let i = 0; do { console.log(i); i++; } while (i < 5);פלט :
0 1 2 3 4הסיכון הגדול ביותר לשימוש ב- do-loop הוא כתיבת תנאי שמעולם לא מתקיים. (אותו הדבר כמו עם לולאה בזמן).
אזהרה: אל תריץ קוד זה.
דוגמא לולאה אינסופית (רע):
let i = 0; do { console.log(i); } while (i < 5);פלט :
התוצאות עשויות להשתנות.
רוצה לקחת את הידע שלך ב- JavaScript לשלב הבא? למד על map, שזה אותו דבר forEach, אבל עם בונוס !! ?
דוגמה לבונוס (איטרציה עם מפה)
מהי מפה?
ויקיפדיה מגדירה מפה כ:
"בשפות תכנות רבות, מפה היא שמה של פונקציה מסדר גבוה יותר המפעילה פונקציה נתונה על כל רכיב של פונקציה, למשל רשימה, ומחזירה רשימת תוצאות באותו סדר. זה נקרא לעתים קרובות חל על כל אחד כאשר הוא נחשב בצורה פונקציונאלית. "How does it work? The map function in JavaScript applies a function to every element inside the array. Please take a moment to re-read that sentence.
Afterwards, the map function returns a new array with the results of applying a function to every element in the array.
Map example:
const array = [1, 1, 1, 1]; // pass a function to map const results = array.map(x => x * 2); console.log(results);Output:
[2,2,2,2]We have applied the map function to the array containing four 1's. The map function then multiplied each element by 2, i.e., x * 2, and returned a new array. The new array was then stored in the results variable.
By viewing our output, we can see this worked successfully. Every element in the array has been multiplied by 2. This method can be used as a replacement to a loop in some cases, and is incredibly powerful.
Conclusion
Well done! You have learned five different ways to iterate over an array in JavaScript. These are the fundamental building blocks that will set you up for success in your JavaScript programming journey.
You have also been exposed to an advanced concept, map, which is used often in large-scale software applications.
So, I’ll leave you with this: how are you going to use arrays in your projects? And which iteration method did you find most exciting?
Thanks for reading!
If you liked my article, please follow me and/or send me a message!
Twitter • Medium • Github