אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » ES20XX » ES2018 – פירוק ובנייה של אובייקט

ES2018 – פירוק ובנייה של אובייקט

רן בר-זיק מרץ 11, 2018 7:07 am 7 תגובות

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

»ES2018 – איטרציה אסינכרונית
»ES2018 – לבחור שמות של קבוצות עם Regex
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

בתקן הקודם אחד הדברים שנכנסו הוא פירוק מערך באמצעות rest parameter שזה שם מפוצץ לשלוש נקודות שמייצגות את ׳השאר׳. rest מלשון כל השאר. בוא ונזכר:


const someArray = ['a', 'b', 'c'];
const  [x,...y] = someArray; 
console.log(x); // a
console.log(y); // ["b", "c"]

מה אלו שלוש הנקודות המוזרות האלו? מדובר במה שאומר לנו בעצם – ״כל השאר״. הדבר הזה בעצם אומר ש-x יקבל את האיבר הראשון במערך ו-y יקבל את כל השאר.

הנה דוגמה נוספת:


const someArray = ['a', 'b', 'c', 'd', 'e', 'f'];
const  [x,y,z,...allOthers] = someArray; 
console.log(x); // a
console.log(y); // b
console.log(z); // c
console.log(allOthers); // ["d", "e", "f"]

פה מי שמקבל את ׳כל השאר׳ – כלומר את שלוש הנקודות הוא הקבוע allOthers.

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


const someObject = {a: 1, b: 2, c: 3};
const {a, ...rest} = someObject;
console.log(a); // 1
console.log(rest); // {b: 2, c: 3}

והנה עוד דוגמה – שימו לב שהסדר של התכונות לא מעניין – רק השם


const someObject = { someProp2: 'someValue2', someProp1: 'someValue1',someProp3: 'someValue3', };
const {someProp2, ...rest} = someObject;
console.log(someProp2); // someValue2
console.log(rest); // {someProp1: "someValue1", someProp3: "someValue3"}

נכון פשוט? תרגלו בעצמכם פה: 🙂

See the Pen 2018 rest in objects by Ran Bar-Zik (@barzik) on CodePen.

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


function myFunction ({arg1, arg2, ...others}) { // rest operator
  console.log(arg1);
  console.log(arg2);
  console.log(others);
}

myFunction({arg1: 'value1', arg2: 'value2', arg3: 'value3', arg4: 'value5'});

See the Pen 2018 Object destructuring abnd collecting other objects by Ran Bar-Zik (@barzik) on CodePen.

אפשר להשתמש באופרטור … כדי ליצור אובייקטים חדשים. שימו לב למשל:


const myObj = {a: 1, b: 1, c: 1,}

const newObj = {...myObj, d: 4}
console.log(newObj); // {a: 1, b: 1, c: 1, d: 4}

מה שקרה כאן שהכנסתי את האובייקט באמצעות … והוא פרס אותו אוטומטית לאובייקט החדש. למה זה טוב? הו הו הו – למירג׳וג׳ אובייקטים למשל!


const myObj = {a: 1, b: 1, c: 1,}
const myObj2 = {d: 1, e: 1, f: 1,}

const newObj = {...myObj, ...myObj2}
console.log(newObj); // {a: 1, b: 1, c: 1, d: 1, e: 1, f: 1,}

See the Pen 2018 Object literal creation by Ran Bar-Zik (@barzik) on CodePen.

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


const myObj1 = {a: 1, b: 1, c: 1,}
const myObj2 = {a: 2, e: 2}

const newObj1 = {...myObj1, ...myObj2}
console.log(newObj1); // {a: 2, b: 1, c: 1, e: 2}

const newObj2 = {...myObj2, ...myObj1}
console.log(newObj2); // {a: 1, e: 2, b: 1, c: 1}

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

See the Pen 2018 Object literal merge by Ran Bar-Zik (@barzik) on CodePen.

בסופו של דבר – תוספת מעניינת לתקן החדש שכדאי להכיר. מעכשיו לא נמצא … רק במערכים אלא גם באובייקטים. השימוש מאוד דומה – רק צריך להשתמש בשמות התכונות.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ES2018

7 תגובות

  1. ניר הגב מרץ 11, 2018 בשעה 9:56 am

    אהבתי מאוד, אבל הצבעתי הפוך בטעות.
    זה נחמד, אבל השאלה האמתית היא מה השימוש של זה ב "עולם האמיתי"

    • משתמש אנונימי (לא מזוהה) הגב יולי 18, 2019 בשעה 10:52 am

      לדוג', לjQuery יש עשרות פונקציות שמקבלות אובייקט אפשרויות. במקום לכתוב
      function f(options = { }) {
      options.a = options.a || 123;
      options.b = options.b || 'hello';

      console.log(options.a, options.b);
      }
      אפשר פשוט לכתוב:
      function f({ a = 123, b = 'hello' } = { }) {
      console.log(a, b);
      }

  2. ינאי הגב מרץ 11, 2018 בשעה 10:40 am

    { const newObj = {…myObj, …myObj2
    שווה ערך לObject.assign

  3. דוד הגב מרץ 11, 2018 בשעה 2:30 pm

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

  4. Nachum37 הגב מרץ 11, 2018 בשעה 4:52 pm

    ה Codepen לא עובד.

  5. Nachum37 הגב מרץ 11, 2018 בשעה 4:53 pm

    כלומר לא נותן Results. כרום 65 על אנדרואיד

  6. נועם הגב מרץ 27, 2022 בשעה 9:14 am

    יש טעות לקראת הסוף, "הסדר כאן באמת משנה, כי מי שבא קודם מנצח" – ובאמת מי שבא אחרון מנצח כמו שמוסבר מיד אחר כך.

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד