איך להשתמש בשיטות מערך ב־JavaScript: שיטות איטרציה

הקדמה

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

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

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

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

הבנת פונקציות חץ

הרבה מדוגמאות במדריך זה ישתמשו ב־ביטויי פונקציית חץ של JavaScript, שמיוצגים על ידי סימן שווה ואז סימן גריעה: =>.

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // קוד לביצוע
}

example();

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

var example = () => {
  // קוד לביצוע
}

example();

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

var example = parameter1 => {
  // קוד לביצוע
}

במהלך הדוגמאות במדריך זה, נשתמש בתחביר של פונקציית החץ. כדי לקרוא ולהבין עוד על פונקציות ב-JavaScript, קרא את מדריך הפונקציות ב־Mozilla Developer Network.

forEach()

פונקציית ה־forEach() קוראת לפונקציה עבור כל איבר במערך.

בואו נתחיל עם המערך הבא שהוקצה למשתנה fish:

let fish = [ "piranha", "barracuda", "cod", "eel" ];

נוכל להשתמש ב־forEach() כדי להדפיס כל פריט במערך fish לקונסולה.

// הדפסת כל פריט במערך
fish.forEach(individualFish => {
	console.log(individualFish);
})

פעם שנעשה זאת, נקבל את הפלט הבא:

Output
piranha
barracuda
cod
eel

דרך נוספת לעשות זאת היא באמצעות מילת המפתח for loop ובדיקתה נגד מאפיין האורך של המערך.

// לולאה דרך אורך המערך
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

הקוד לעיל יציג את אותו הפלט כמו בשימוש בשיטת forEach(). כשיטת האיטרציה המיועדת במיוחד לשימוש עם מערכים, forEach() היא יותר קצרה ופשוטה למשימה זו במיוחד.

map()

השיטה map() יוצרת מערך חדש עם תוצאת קריאת פונקציה על כל איבר במערך.

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

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// הדפסת כל פריט במערך
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

אנו יכולים גם להשתמש ב־map() כדי לשנות את ערכי כל פריט במערך. כדי להדגים זאת, נוסיף s לסוף כל פריט במערך fish כדי לפלורליזציה של כל מילה.

// לפלורליזציה של כל פריטים במערך הדג
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

המשתנה המקורי fish לא השתנה, אך pluralFish כעת מכילה גרסה משונה של המשתנה המקורי.

filter()

השיטה filter() יוצרת מערך חדש עם האיברים שעוברים את תוצאת הבדיקה הנתונה.

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

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// לסנן את כל היצורים שמתחילים ב- "s" לרשימה חדשה
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

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

filter() הוא שיטת האיטרציה, ואינו משנה את המערך המקורי.

reduce()

שיטת ה- reduce() תקטין מערך לערך יחיד.

זה רואים בדרך כלל עם מספרים, כמו למצוא את סכום כל המספרים במערך.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// לקבל את סכום כל הערכים המספריים
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

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

find()

שיטת find() מחזירה את הערך הראשון במערך שעובר טסט מסוים.

לדוגמה, ניצור מערך של יצורי ים.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

אז נשתמש בשיטת find() כדי לבדוק אם אחד מהיצורים במערך הם צפלופודים.

// בדיקה האם ערך נתון הוא צפלופוד
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

מאחר ו־octopus היה הערך הראשון במערך שעבר את הבדיקה בפונקציית isCephalopod(), הוא הוא הערך הראשון שיחזר.

שיטת find() יכולה לעזור לך לעבוד עם מערכים שמכילים ערכים רבים.

findIndex()

שיטת findIndex() מחזירה את האינדקס הראשון במערך שעובר טסט מסוים.

נוכל להשתמש בדוגמת seaCreatures אותה השתמשנו בה בשיטת find().

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

באמצעות הבדיקה isCephalopod, נמצא את מספר האינדקס במקום הערך של ההתאמה הראשונה.

// בדיקה האם ערך נתון הוא צפלופוד
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

octopus הוא הפריט הראשון שעבר את הבדיקה ויש לו אינדקס של 1, לכן זהו מספר האינדקס שיחזר.

אם הבדיקה לא מתממשה, findIndex() תחזיר -1.

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

שיטת findIndex() שימושית במיוחד כאשר מתעסקים עם מערכים המכילים הרבה פריטים.

מסקנה

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

כדי לבדוק שוב את היסודות של מערכים, קרא הבנת מערכים ב-JavaScript. למידע נוסף על תחביר ב-Javascript, ראה את המדריך שלנו על "הבנת תחביר ומבנה קוד ב-JavaScript".