חדשות טובות - התכונות החדשות של ES2020 מסתיימות כעת! זה אומר שיש לנו עכשיו מושג מלא על השינויים שקורים ב- ES2020, המפרט החדש והמשופר של JavaScript. אז בואו נראה מה השינויים האלה.

מספר 1: BigInt

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

כרגע המספר המרבי שאתה יכול לאחסן כמספר שלם ב- JavaScript הוא pow(2, 53) - 1. אבל BigInt מאפשר לך ללכת מעבר לכך.  

עם זאת, עליך להוסיף nצירוף בסוף המספר, כפי שניתן לראות לעיל. זה nמציין שמדובר ב- BigInt ויש להתייחס אליו אחרת על ידי מנוע JavaScript (על ידי מנוע v8 או כל מנוע שהוא משתמש בו).

שיפור זה אינו תואם לאחור מכיוון שמערכת המספרים המסורתית היא IEEE754 (שפשוט אינה יכולה לתמוך במספרים בגודל זה).

מס '2: ייבוא ​​דינמי

ייבוא ​​דינמי ב- JavaScript נותן לך אפשרות לייבא קבצי JS באופן דינמי כמודולים ביישום שלך באופן מקורי. זה בדיוק כמו איך אתה עושה את זה עם Webpack ובבל כרגע.

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

הדבר הטוב הוא שלמעשה אתה מייבא מודול, ולכן הוא לעולם לא מזהם את מרחב השמות הגלובלי.

# 3: התאחדות מטושטשת

התאחדות גסות מוסיפה יכולת לבדוק באמת nullishערכים במקום falseyערכים. מה ההבדל בין nullishלבין falseyערכים, אתם עשויים לשאול?

ב- JavaScript, הרבה ערכים הם falsey, כמו מחרוזות ריקות, המספר 0, undefined, null, false, NaN, וכן הלאה.

עם זאת, פעמים רבות כדאי לבדוק אם משתנה בטל - כלומר אם הוא או undefinedאו null, כמו כשמשתנה יהיה בסדר מחרוזת ריקה, או אפילו ערך כוזב.

במקרה כזה, תשתמש במפעיל הקואליסינג החדש והבטלה, ??

אתה יכול לראות בבירור כיצד אופרטור OR מחזיר תמיד ערך אמת, ואילו אופרטור null מחזיר ערך שאינו אפס.

מס '4: שרשור אופציונלי

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

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

# 5: Promise.allSettled

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

זה לא היה זמין באופן מקורי לפני, למרות כמה מימושים קרובים אוהבים raceו allהיו זמינים. זה מביא את "פשוט הרץ את כל ההבטחות - לא אכפת לי מהתוצאות" באופן מקורי ל- JavaScript.

# 6: מחרוזת # matchAll

matchAllהיא שיטה חדשה שנוספה Stringלאב - טיפוס אשר קשורה לביטויים רגולריים. זה מחזיר איטרטור שמחזיר את כל הקבוצות המותאמות בזו אחר זו. בואו נסתכל על דוגמה מהירה:

# 7: גלובלי זה

אם כתבת קוד JS חוצה פלטפורמות שיכול לפעול ב- Node, בסביבת הדפדפן, וגם בתוך עובדי רשת, תתקשה להשיג את האובייקט הגלובלי.

הסיבה לכך היא כי מדובר windowבדפדפנים, globalב- Node selfולעובדי רשת. אם יש יותר זמן ריצה, האובייקט הגלובלי יהיה שונה גם עבורם.

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

ES2020 מביא אותנו globalThisשמתייחס תמיד לאובייקט הגלובלי, לא משנה היכן אתה מבצע את הקוד שלך:

מס '8: ייצוא מרחב השמות של המודול

במודולי JavaScript כבר ניתן היה להשתמש בתחביר הבא:

import * as utils from './utils.mjs'

עם זאת, לא exportהיה תחביר סימטרי עד כה:

export * as utils from './utils.mjs'

זה שווה ערך לדברים הבאים:

import * as utils from './utils.mjs' export { utils }

מס '9: סדר מוגדר היטב עבור

המפרט של ECMA לא ציין באיזה סדר for (x in y)  צריך לרוץ. למרות שדפדפנים יישמו סדר עקבי בעצמם עד כה, זה כבר סטנדרטי רשמית ב- ES2020.

# 10: import.meta

import.metaהאובייקט נוצר על ידי יישום ECMAScript, עם nullאב טיפוס.

שקול מודול module.js:

תוכל לגשת למידע מטא אודות המודול באמצעות import.metaהאובייקט:

console.log(import.meta); // { url: "file:///home/user/module.js" }

הוא מחזיר אובייקט עם urlמאפיין המציין את כתובת ה- URL הבסיסית של המודול. זו תהיה כתובת האתר שממנה הושג התסריט (עבור סקריפטים חיצוניים), או כתובת ה- URL של המסמך של המסמך המכיל (עבור סקריפטים מוטבעים).

סיכום

אני אוהב את העקביות והמהירות שבה קהילת JavaScript התפתחה ומתפתחת. זה מדהים ונפלא באמת לראות כיצד JavaScript הגיע משפה שהוזמרה בבעונה של 10 שנים לאחת השפות החזקות, הגמישות והגמישות ביותר בכל הזמנים.

האם ברצונך ללמוד JavaScript ושפות תכנות אחרות בצורה חדשה לחלוטין? עבור לפלטפורמה חדשה למפתחים שאני עובד עליה לנסות אותה היום!

מה התכונה המועדפת עליך ב- ES2020? ספר לי על כך על ידי ציוץ והתחברות אלי בטוויטר ובאינסטגרם!

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