מבוא למפעיל הפיזור ולפרמטר rest ב- JavaScript (ES6)

גם אופרטור ההתפשטות וגם פרמטר המנוחה נכתבים כשלוש נקודות עוקבות (...). האם יש להם עוד משהו במשותף?

מפעיל התפשטות (...)

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

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

הדפסים:

ליאון לאב למעשה שר הטבעות
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

הדפסים:

1 4 5 7

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

השימוש הנפוץ ביותר הוא כנראה שילוב מערכים. אם אי פעם היית צריך לעשות זאת בזמנים שלפני מפעיל התפשטות, כנראה שהשתמשת concat()בשיטה.

const shapes = ["triangle", "square", "circle"];const objects = ["pencil", "notebook", "eraser"];const chaos = shapes.concat(objects);console.log(chaos);

הדפסים:

["משולש", "מרובע", "מעגל", "עיפרון", "מחברת", "מחק"]

זה לא נורא, אבל מה שמפעיל התפשטות מציע הוא קיצור דרך, מה שהופך את הקוד שלך לקראתי יותר:

const chaos = [...shapes, ...objects];console.log(chaos);

הדפסים:

["משולש", "מרובע", "מעגל", "עיפרון", "מחברת", "מחק"]

הנה מה שנקבל אם ננסה לעשות את אותו הדבר ללא מפעיל התפשטות:

const chaos = [shapes, objects];console.log(chaos);

הדפסים:

[מערך (3), מערך (3)]

מה קרה פה? במקום לשלב את המערכים, קיבלנו chaosמערך עם shapesהמערך באינדקס 0 objectsוהמערך באינדקס 1.

פרמטר השאר (...)

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

הקצאת ערכים של מערך למשתנים

בואו נסתכל על הדוגמה הבאה:

const movie = ["Life of Brian", 8.1, 1979, "Graham Chapman", "John Cleese", "Michael Palin"];const [title, rating, year, ...actors] = movie;console.log(title, rating, year, actors);

הדפסים:

"חייו של בריאן", 8.1, 1979, ["גרהם צ'פמן", "ג'ון קליז", "מייקל פאלין"]

פרמטר rest מאפשר לנו לקחת את ערכי movieהמערך ולהקצות אותם למספר משתנים בודדים באמצעות הרס. בדרך זו title, rating, ו yearמוקצים שלושת הערכים הראשונים במערך, אבל איפה הקסם האמיתי קורה היא actors. הודות לפרמטר rest, actorsמוקצה לו הערכים הנותרים של movieהמערך, בצורה של מערך.

פונקציות שונות

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

sum(1, 2);sum(494, 373, 29, 2, 50067);sum(-17, 8, 325900);

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

function sum() { let total = 0; for(const argument of arguments) { total += argument; } return total;}

זה אכן עובד, אבל זה רחוק מלהיות מושלם:

  • אם אתה מסתכל על ההגדרה sum()לפונקציה, אין לה פרמטרים. זה יכול להיות מטעה למדי.
  • זה יכול להיות קשה להבין אם אינך מכיר את אובייקט הטיעונים (כמו: מאיפה לעזאזל זה argumentsבא ?!)

כך היינו כותבים את אותה פונקציה עם פרמטר rest:

function sum(...nums) { let total = 0; for(const num of nums) { total += num; } return total;}

שים לב for...inשהלולאה הוחלפה גם for...ofבלולאה. הפכנו את הקוד שלנו לקריא ותמציתי יותר בבת אחת.

הללויה ES6!

האם אתה רק מתחיל את המסע שלך בתכנות? הנה כמה מאמרים שעשויים לעניין אותך גם:

  • האם bootcamp קידוד הוא משהו בשבילך?
  • האם באמת אפשרי שינוי בקריירה?
  • מדוע רובי היא שפה נהדרת להתחיל לתכנת איתה