ES2019 – יצירת אובייקטים ממערכים עם fromEntries

אחד מהפיצ'רים החזקים ב-ES2019 הוא fromEntries – מתודה נהדרת וקלה להבנה שעוזרת מאוד בהמרה של מערכים לאובייקטים. למה אנחנו צריכים להמיר מערכים לאובייקטים? טוב, אם אתם מתממשקים ל-API שונים עם Middleware מבוסס node.js, אז אתם צריכים לבצע המרות כאלו. אם אתם מתממשקים באפליקצית הקליינט שלכם ל-API שאין לכם שליטה עליו, אז אתם צריכים לעשות המרות כאלו. אם אתם מייבאים קומפוננטה במקום מסוים (ולא משנה אם מדובר באנגולר, ריאקט או Vue) אז תצטרכו לבצע המרות כאלו.

התוספות האחרונות מתקן ES6 ומעלה מכילות כמה תוספות חשובות להמרות שעד כה שכנו להן בנחת בספרית lodash (ספריה אולטרא פופולרית שכדאי להכיר שמכילה כלי עזר לג'אווהסקריפט). תוספת חשובה כזו היא fromEntries. מה שהיא עושה זה לקחת מערך ולהחזיר אובייקט. הכי פשוט בעולם:

const children = [['Omri', 18], ['kfir', 12], ['Daniel', 9], ['Michal', 7]];
const childrenObject = Object.fromEntries(children);
console.log(childrenObject);
/* 
Object {
  Daniel: 9,
  kfir: 12,
  Michal: 7,
  Omri: 18
}
*/

אני מעביר מערך ונוצר ממנו אובייקט. הכי פשוט והכי כיפי בעולם.

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

הנה הדוגמה של השימוש, פה אני יוצא פונקצית חיפוש באובייקט שמחזירה לי את מה שאני רוצה מתוך אובייקט 'לקוח'. אפשר לראות איך אני ממיר את האובייקט למערך כדי שאוכל לעבוד איתו במתודות המערך filter ו-entries ואז ממיר אותו חזרה עם fromObject:

const customer = {
  firstName: 'Ran',
  lastName: 'Bar-Zik',
  street: 'Kaplan St',
  city: 'Petah Tiqwa',
  age: 42, 
}

function pick(object, ...keys) {
  const objectEntries = Object.entries(object);
  // [ ["firstName", "Ran"], ["lastName", "Bar-Zik"], ["street", "Kaplan St"], ["city", "Petah Tiqwa"], ["age", 42] ]
  const filteredEntries = objectEntries.filter(
    // This arrow function syntax returns the result
    ([key]) => keys.includes(key)
  );
  // [["firstName", "Ran"],  ["lastName", "Bar-Zik"]]
  return Object.fromEntries(filteredEntries);
}

let result = pick(customer, 'firstName', 'lastName'); // {firstName: "Ran", lastName: "Bar-Zik"}
result = pick(customer, 'city', 'street'); // {street: "Kaplan St", city: "Petah Tiqwa"}
result = pick(customer, 'age'); // {age: 42}

באמת קל ופשוט. פשוט תזכרו – יש לכם מערך? רוצים להמיר לאובייקט? אפשר לעשות את זה בקלות עם מה שהוסיפו ל-ES2019. הכל קל בעולם.

הערה חשובה: משתמשים בכרום לא עובד לכם? ודאו שאתם בכרום 73. בעולם האמיתי כמובן שמומלץ להשתמש ב babel.