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

ES017 – איטרציה של אובייקטים ו-getOwnPropertyDescriptors

רן בר-זיק מרץ 26, 2017 7:07 am 2 תגובות

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

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

אובייקטים תמיד היו בעיתיים לאיטרציה בג'אווהסקריפט. בעיקר בגלל הפרוטוטייפ שמסבך מאוד את כל הסיפור של האיטרציה וגם בגלל שאין ממש מתודות טובות לעשות איטרציה באובייקטים. ES017 מנסה להקל על העניין עם entries – מתודה שמחזירה לנו את כל הערכים של האובייקט באופן מסודר כמערך. ונקראת כמתודה של Object. הנה הדוגמה:


let myObj=  {one: 1, two: 2, someProperty: 'Some Value'};

console.log( Object.entries(myObj) ) //[ ["one":, 1], ["two":, 2], ["someProperty":, "Some Value"] ]

כפי שאנו רואים, יש לי אובייקט מסוים ואני פשוט מחלץ את כל ה-key value שלו למערך באופן מסודר באמצעות קריאה ל-Object.entries. עד כמה שזה נשמע מצחיק, לא היתה דרך טובה לעשות זאת עד עכשיו. שימו לב שהתכונות המתקבלות הן התכונות של האובייקט בלבד ולא תכונות שמגיעות דרך הפרוטוטייפ. שזה מעולה לאיטרציות עם for of. הנה הדוגמה:


let myObj=  {one: 1, two: 2, someProperty: 'Some Value'};

for (let [k,v] of Object.entries(myObj)) {
  console.log(`${k} : ${v}`);
}

//"one : 1"
//"two : 2"
//"someProperty : Some Value"

בעצם זה סוג של המרה של אובייקט למערך שכולל את כל המרכיבים של האובייט בפורמט של key: value מוכר. מפה אפשר לעשות מה שרוצים למערך הזה. לעשות לו איטרציה, להכניס אותו לאובייקט map. מה שבא לנו.

אם המפתחות לא מעניינים אותנו ואנחנו רוצים להשתמש רק בערכים, אפשר להשתמש במתודת values שעושה בדיוק את אותו הדבר רק עם הערכים שיש בתוך האובייקט.


let myObj=  {one: 1, two: 2, someProperty: 'Some Value'};

console.log( Object.values(myObj) ) //[1, 2, "Some Value"] ]

for (let k of Object.values(myObj)) {
  console.log(k);
}

//1
//2
//"Some Value"

ולמי שרוצה להשתעשע – הנה ה-codepen:

See the Pen ES2017 entries by Ran Bar-Zik (@barzik) on CodePen.

getOwnPropertyDescriptors

פיצ'ר נוסף שיש ל-Object הוא getOwnPropertyDescriptors. הוא די פשוט ומביא את ה-descriptors של האובייקט. למי שלא יודע, אציין בקצרה ש-descriptor הן תכונות של האובייקט. למשל מתודת get או set או תכונות אחרות. כאשר אני משמש ב-getOwnPropertyDescriptors אני יכול לקבל מידע על כל התכונות האלו ואני אדגים:


const obj = {
  somePropery: 123,
  get getSomeProperty() { return this.somePropery },
};
console.log(Object.getOwnPropertyDescriptors(obj));

התוצאה שאקבל זה obj עם פירוט מלא של ה-descriptors, לא רק הערך של התכונות אלא גם מידע נוסף עליהן. למשל:


Object
getSomeProperty:Object
configurable:true
enumerable:true
get:getSomeProperty()
set:undefined

somePropery:Object
configurable:true
enumerable:true
value:123
writable:true

משתמשים בזה בעיקר לבצע cloning של אובייקטים מורכבים. למשל, assign לאובייקט מורכב עלול לגרום להתנהגות לא צפויה ולאיבוד מידע על התכונות. בעוד ששימוש מושכל ב-getOwnPropertyDescriptors יכול לפתור את הבעיה. הנה דוגמה:


const obj = {
  somePropery: 123,
  get getSomeProperty() { return this.somePropery },
};

const target1 = {};
Object.assign(target1, obj);

const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(obj));

console.log(Object.getOwnPropertyDescriptors(obj));
console.log('-----------------');
console.log(target1);
console.log('+++++++++++++++++');
console.log(target2);

אם תריצו את הקוד הזה בקונסולה תראו ששני ה-instances שונים זה מזה במידע. בעוד ה-assign יעתיק רק ערך פרימיטיבי, כאשר אנו משתמשים ב-getOwnPropertyDescriptors גם מידע נוסף יועתק. אם זה נשמע תיאורטי ולא קשור זה בסדר גמור.

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

2 תגובות

  1. hez הגב מרץ 26, 2017 בשעה 11:05 am

    במה זה שונה מ Object.keys ?
    שזה מחזיר גם את הערכים ?

    • רן בר-זיק הגב מרץ 31, 2017 בשעה 6:09 pm

      אכן כן.

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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