מפת JavaScript, צמצום וסינון - פונקציות מערך JS מוסברות בדוגמאות קוד

תִכנוּת

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

הנה סיכום מהנה מאת סטיבן לושר:

מיפוי / סינון / צמצום בציוץ:

מפה ([?,?,?], לבשל)

=> [?,?,?]

פילטר ([?,?,?], הוא צמחוני)

=> [?,?]

להפחית ([?,?], לאכול)

=>?

- סטיבן לושר (@steveluscher) 10 ביוני 2016

מַפָּה

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

תחביר

var new_array = arr.map(function callback(element, index, array) { // Return value for new_array }[, thisArg])

בשיחה החוזרת elementנדרש רק המערך . בדרך כלל מבוצעת פעולה כלשהי על הערך ואז מוחזר ערך חדש.

דוגמא

בדוגמה הבאה, כל מספר במערך מוכפל.

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(item => item * 2); console.log(doubled); // [2, 4, 6, 8]

לְסַנֵן

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

תחביר

var new_array = arr.filter(function callback(element, index, array) { // Return true or false }[, thisArg])

התחביר עבור filterדומה לזה map, למעט שפונקציית ההתקשרות צריכה לחזור trueכדי לשמור על האלמנט, או falseאחרת. בשיחה החוזרת elementנדרש רק ה- .

דוגמאות

בדוגמה הבאה, "מסוננים" מספרים אי-זוגיים ומשאירים רק מספרים זוגיים.

const numbers = [1, 2, 3, 4]; const evens = numbers.filter(item => item % 2 === 0); console.log(evens); // [2, 4]

בדוגמה הבאה, filter()משתמשים בכדי להשיג את כל התלמידים שהציונים שלהם גדולים או שווים ל- 90.

const students = [ { name: 'Quincy', grade: 96 }, { name: 'Jason', grade: 84 }, { name: 'Alexis', grade: 100 }, { name: 'Sam', grade: 65 }, { name: 'Katie', grade: 90 } ]; const studentGrades = students.filter(student => student.grade >= 90); return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

לְהַפחִית

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

תחביר

arr.reduce(callback[, initialValue])

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

  • מצבר - הערך המוחזר של האיטרציה הקודמת
  • currentValue - הפריט הנוכחי במערך
  • אינדקס - אינדקס הפריט הנוכחי
  • מערך - המערך המקורי עליו צמצמו נקרא
  • The initialValue argument is optional. If provided, it will be used as the initial accumulator value in the first call to the callback function.

Examples

The following example adds every number together in an array of numbers.

const numbers = [1, 2, 3, 4]; const sum = numbers.reduce(function (result, item) { return result + item; }, 0); console.log(sum); // 10

In the next example, reduce() is used to transform an array of strings into a single object that shows how many times each string appears in the array. Notice this call to reduce passes an empty object {} as the initialValue parameter. This will be used as the initial value of the accumulator (the first argument) passed to the callback function.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit']; var petCounts = pets.reduce(function(obj, pet){ if (!obj[pet]) { obj[pet] = 1; } else { obj[pet]++; } return obj; }, {}); console.log(petCounts); /* Output: { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Video Explanation

Check out the video below from the freeCodeCamp.org YouTube channel. It covers the array methods discussed, plus a few more.