בתקופה האחרונה נתקלתי בלא מעט מפתחים שעושים שימוש שגוי או שפשוט לא מכירים את המתודות שיש למערך ב- JavaScript. לכן, החלטתי לכתוב ולהרחיב בנושא.
במאמר זה תמצאו את המתודות הנפוצות שיש לסינון, סידור וחיפוש במערכים.
map
מתודת map()
מקבלת callback כפרמטר דרכו ניתן להחזיר מערך חדש עפ״י הלוגיקה שבתוכו.
הפונקציה עוברת על כל הערכים מהמערך המקורי ובכל מעבר כזה מעבירה ל- callback את הערך הנוכחי בצירוף האינדקס שלו (מיקומו).
בדרך כלל, נעשה שימוש בmap() כשנרצה להחזיר מערך חדש המבוסס על הערכים מהמערך המקורי שעברו מניפולציה. למשל, הדוגמא הבאה מחזירה מערך חדש לאחר שהכפלנו את הערכים מהמערך המקורי.
const array = [1, 4, 8, 16];
// map
const map = array.map((num, idx) => num * 2);
console.log(map);
// output: Array [2, 8, 16, 32]
filter
מתודת filter()
, בדומה ל- map, מקבלת callback המכיל תנאים מסויימים דרכם ניתן להרכיב מערך חדש רק עם הערכים העונים על אותם התנאים שקבענו.
בדוגמא הבאה נחזיר מערך עם גילאים השווים או עולים על 25.
const ages = [12, 25, 28, 10]
const filteredAges = ages.filter((age, idx) => age >= 25)
// will return an array that contains ages equal or above 25
console.log(filteredAges):
// filteredAges = [25, 28];
find
מתודה זו מחפשת מחזירה את הערך הראשון שעונה על התנאי בתוך ה- callback שהעברנו לה.
במידה ואף ערך לא ענה על התנאים המתודה תחזיר undefined
.
const array = ['A', 'B', 'C']
const findC = array.find(name => name === 'C')
console.log(findC) // output: 'C'
const findD = array.find(name => name === 'D')
console.log(findD) // output: undefined
findIndex
מתודה זו תחזיר את מיקום הערך הראשון שעונה על התנאי בתוך ה- callback שהעברנו לה.
במידה ואף ערך לא ענה על התנאים המתודה תחזיר -1
.
let numbers = [1, 5, 7, 8, 10, 14];
let numIndex = numbers.findIndex(number => number === 7);
console.log(numIndex);
// output: 2
includes
מתודת includes()
בודקת אם המערך מכיל ערך מסויים, שימו לב שאם נרצה לחפש אובייקט במערך, המתודה בודקת האם קיים רפרנס של אותו אובייקט.
const objRef = {}
const array = [1, 2, 3, 4, 5, objRef];
array.includes(3); // output: true
array.includes(25); // output: false
array.includes({}); // output: false
array.includes(objRef); // output: true
ניתן להוסיף עוד משתנה למתודה. משתנה זה קובע מאיזה מיקום נרצה לבדוק האם הערך קיים במערך.
array.includes(3, 4) // output: false
אם נשתמש בדוגמא למעלה אבל ננסה לחפש ממיקום 4 נקבל תשובה שהערך 3 לא קיים.
sort
מתודת sort()
מחזירה מערך ממוין עפ״י תנאים שאנחנו קובעים בתוך ה- callback המחזירים 1
או -1
.
חשוב לציין! הפעולה משנה את המערך המקורי ולא מחזירה העתק ממויין שלו.
אותו callback מקבל כפרמטרים את הערך הנוכחי וזה שבא אחריו לצורך השוואתם. הפונקציה הופכת את הערכים למחרוזות כדי שיהיה ניתן להשוותם על פי רצף יחידות UTF-16.
חשוב להזכיר כי סדר המיון המוגדר כברירת מחדל (ללא העברת callback) הוא עולה.
מתודת sort() תמיין אלמנטים על סמך ערך ההחזרה של פונקציית ההשוואה לפי הכללים הבאים:
- אם נחזיר
1
נקבע שהערך הנוכחי צריך להיות מעל הערך הבא בסדר של המערך.
- במידה ונחזיר
-1
נקבע שהערך הנוכחי צריך להיות מתחת לערך הבא בסדר של המערך.
- אם נחזיר
0
נקבע שהערך הנוכחי צריך להיות באותו מיקום עם ערך הבא בסדר של המערך.
// sort in descending order
const numbers = [1, 2, 3, 4, 5];
numbers.sort((a, b) => a > b ? -1 : 1);
console.log(numbers); // output: [5, 4, 3, 2, 1]
// sort in ascending order
const letters = ['e', 'a', 'c', 'u', 'y'];
letters.sort();
console.log(letters); // output: ['a', 'c', 'e', 'u', 'y']
forEach
מתודת forEach()
לא מחזירה עף ערך אלא רק מאפשרת לנו להפעיל פונקצית callback על כל ערך במערך.
let numbers = [1, 2, 3];
numbers.forEach(number => console.log(number);
// output 1
// output 2
// output 3
reduce
המשמעות של reduce()
היא לרוץ על כל הערכים ולהחזיר ערך אחד בודד, יכול להיות מספר, מחרוזת או מערך.
בדוגמא הבאה ניתן לראות כיצד לחבר את המחיר הכולל למערך עם מחירי נעליים.
שימו לב! הפרמטר השני המועבר לפונקציה, לאחר ה- callback, מייצג את הערך ההתחלתי איתו נתחיל לבצע את החישוב.
במקרה שלנו מדובר ב- 0
שהוא מספר, משום שאנחנו עוסקים בחיבור מספרים. באותה מידה הפרמטר יכל להיות מחרוזת או מערך התחלתי.
let shoesPrices = [100, 224, 676];
let totalShoesPrice = shoesPrices.reduce((total, price) => {
return total + price
}, 0)
// the accumulator is the total; hold the new values you want to add
// the price is the next shoes price.
console.log(totalShoesPrice) // output 1000
some
מתודת מערך זו בודקת אם לפחות אלמנט אחד בתוך המערך נמצא חיובי עבור תנאי ספציפי שאנחנו מגדירים.
אם יש התאמה, some מחזיר true, אחרת, הוא מחזיר false.
const array = [1, 2, 3, 4, 5, 6];
// at least one element is greater than 0
const positiveNumber = array.some(num => num > 0);
console.log(positiveNumber);
// output: true
// at least one element is lower than 0
const negativeNumber = array.some(num => num < 0);
console.log(negativeNumber); // output: false
לסיכום
בעזרת דוגמאות שצרפתי למאמר הדגמתי מהן המתודות הנפוצות עבור סינון, סידור וחיפוש במערכים וכיצד ניתן להשתמש בהן.
אני מזמין אתכם להמשיך ולהעמיק את הקריאה על אותן המתודות גם באתר MDN.
חשוב לציין שישנן מתודות נוספות שעוזרות לנו לשנות את ערכי המערך עצמו כמו: slice, splice, push, pop, unshift
שאולי נסקור במאמר אחר.
לבינתיים, אשמח לפידבקים מכם על המאמר.
כמובן שאפשר לפנות אליי בפרטי לשאלות,