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

מתודה שימושית מאוד מהתקן החדש של ES2019 שמאפשרת להמיר בקלות מערכים לאובייקטים

אחד מהפיצ'רים החזקים ב-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
}
*/

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

https://codepen.io/barzik/pen/aMKgbV

אפשר להשתמש בזה למשל כשעושים 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}
https://codepen.io/barzik/pen/OqdVqW

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

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

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

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

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

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

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

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

עבודה בהיי טק

איך מראיינים סניורים?

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

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