הרשמה לניוזלטר

הרשמה לניוזלטר

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

Ⓒ כל הזכויות שמורות ל- Fed Cast – קהילת מפתחי הפרונט בישראל

מתודות נפוצות לסינון סידור וחיפוש במערכים

מתודות נפוצות לסינון, סידור וחיפוש מערכים ב- JavaScript

בתקופה האחרונה נתקלתי בלא מעט מפתחים שעושים שימוש שגוי או שפשוט לא מכירים את המתודות שיש למערך ב- 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 שאולי נסקור במאמר אחר.

לבינתיים, אשמח לפידבקים מכם על המאמר.

כמובן שאפשר לפנות אליי בפרטי לשאלות,

ניר ארגיל.

שלום לך 👋 נעים להכיר.

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

אנחנו לא שולחים ספאם!

רוצים לקבל מאיתנו עדכונים?

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

הרשמה לניוזלטר

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