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.

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

ספריות ומודולים

מציאת PII באמצעות למידת מכונה

כך תגנו על משתמשים שלכם שמעלים מידע אישי רגיש כמו תעודות זהות באמצעות שירות אמאזוני.

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

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