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

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

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

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

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

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

יסודות בתכנות

מספרים בינאריים בקוד

איך, ויותר חשוב למה, משתמשים במספרים בינאריים בתכנות? גם בפייתון ובג׳אווהסקריפט?

פתרונות ומאמרים על פיתוח אינטרנט

עבודה עם GPT למתכנתים

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

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