ב-Spread נוכל להשתמש על מנת לפזר את האיברים של מערך מסוים, נוכל להשתמש בו למשל על מנת לפזר את איבריו של מערך מסוים אל תוך מערך אחר.
חידוש נוסף ומעניין שנוסף לשפת JavaScript בגרסת ES6 הוא ה-Spread.
ב-Spread נוכל להשתמש על מנת לפזר את איבריו של מערך למשל.
בתור דוגמא ראשונית, בואו נפעל כמו בימים שלפני ES6.
נבחן מצב שבו ברצוננו להדפיס את כל איבריו של מערך נתון, אחת מהדרכים הפשוטות לעשות זאת היא באמצעות לולאה:
var myArray = [11, 22, 33, 44, 55];
for (var i = 0; i < myArray.length; i++){
console.log(myArray[i]);
}
כעת נוכל לראות כיצד ה-Spread יכול לעזור לנו באופרציות דומות.
שימוש ב-Spread
ה-Spread הוא אופרטור שנראה כך – (…), כלומר שמדובר ב-3 נקודות שמופיעות ברצף לפני שם המערך.
מטרתו של אופרטור זה היא לפזר את איבריו של מערך.
אם נרצה לפזר את איבריו של מערך לשם הדפסה למשל, נפשוט נוסיף את האופרטור לפני שם המערך:
var myArray = [11, 22, 33, 44, 55]; console.log(...myArray);
העתקת מערך קיים למערך חדש
שימוש חשוב נוסף הוא להעתיק את איבריו של המערך למערך אחר.
יש לזכור כי מערך הוא מסוג Reference Type, כלומר שאם ננסה להעתיק מערך קיים למערך חדש באופן רגיל –
שניהם ישבו באותו המיקום בזיכרון, וכאשר נשנה משהו באחד, זה ישתנה גם בשני.
שימו לב לקטע הקוד הבא שידגים זאת:
var myArray = [11, 22, 33, 44, 55var myArray = [11, 22, 33, 44, 55];
var newArray = myArray;
myArray[0] = 0; // משנה את האינדקס הראשון במערך הראשון
console.log('myArray:')
console.log(...myArray);
console.log('myArray:')
console.log(...newArray); // שני המערכים השתנו
כלומר שאם נשתמש ב-spread על מנת לפזר את איבריו של מערך אל תוך מערך חדש זה היה מונע זאת:
var myArray = [11, 22, 33, 44, 55];
var newArray = [...myArray];
myArray[0] = 0; // משנה את האינדקס הראשון במערך הראשון
console.log('myArray:')
console.log(...myArray);
console.log('\nnewArray:')
console.log(...newArray); //
שימוש ב-Spread על אובייקטים
כשם שהשתמשנו ב-Spread על מערכים, כך נוכל לעשות גם עם אובייקטים.
כעת ניצור 2 אובייקטים ונפזר אותם באובייקט חדש.
כמובן שנוכל לפזר את שניהם בבת אחת, נעשה זאת על ידי הפרדה ביניהם באמצעות פסיק (,).
אין זה מן הנמנע גם שהאובייקט החדש יכיל פריטים עוד לפני כן.
שימו לב ל-Code Snippet הבא:
const obj1 = { a : 11, b : 22 };
const obj2 = { c : 33, d : 44 };
const newObj = {...obj1, ...obj2, e : 55}; // מעתיק את שני האובייקטים הראשונים לאובייקט חדש
console.log(newObj);
שימו לב שאם היינו מנסים להדפיס את האובייקט כפי שהדפסנו את המערכים היינו מקבים שגיאה,
וזאת משום שאובייקט לא נתון לאיטרציות כמו מערך למשל, אין לו אינדקסים,
אך מה שכן ניתן לעשות – זה להשתמש בלולאת for in:
for (item in newObj) {
console.log(newObj[item])
}
Rest Parameter
שימוש נוסף באופרטור (…) הוא כפרמטר Rest.
כאשר אנו משתמשים ב-Spread כפרמטר בפונקציה הוא נקרא Rest Parameter.
נוכל להשתמש בו למשל על מנת שנוכל לקבל מספר ערכים לא ידוע מראש בפונקציה שלנו.
בקטע הקוד הבא נדגים כיצד ניתן להשתמש בפרמטר Rest על מנת לקבל כמות לא ידועה מראש של ערכים לפונקציה שתחשב את הסכום שלהם על ידי שימוש ב-reduce:
function sum(...nums){
return nums.reduce((currValue, currIndex) => currValue + currIndex);
}
console.log(sum(1, 5, 4)); // 10
console.log(sum(10, 30, 30, 30)); // 100
כלומר שמה שקרה כאן מאחורי הקלעים זה שנוצר לנו בתוך הפונקציה מערך שמורכב מהערכים ששלחנו לפונקציה,
וכמערך – לא הייתה לנו כל בעיה לבצע reduce על מנת לחשב את הסכום,
ולכן נוכל לקבל התוצאה הבאה:
דרך נוספת לשימוש היא לשלוח את הפרמטר לפונקציה.
נניח והפונקציה שלנו כתובה כך שהיא מקבלת 3 ערכים, כאשר נקרא לה, נוכל לשלוח לה Rest Parameter:
function sum(num1, num2, num3){
return num1 + num2 + num3;
}
var myArr1 = [1, 5, 4];
var myArr2 = [10, 30, 30, 30];
console.log(sum(...myArr1)); // 10
console.log(sum(...myArr2)); // 70
שימו לב כי כאשר שלחנו את המערך השני, החישוב בוצע רק על שלושת האיברים הראשונים,
וזאת משום שהפונקציה מקבלת רק 3 פרמטרים.
אם כך, ראינו כיצד להשתמש ב-Spread Operator ו-Rest Parameter.
לקריאה מורחבת באתר MDN יש ללחוץ כאן
