6 - 10 תכונות חדשות מדהים

הידעת כי JavaScript (יחד עם JScript ו- ActionScript) הוא יישום של מטרה כללית בצד הלקוח שפת סקריפט שפת שנקרא ECMAScript? כדי להפוך את ההגדרה מגעילה קצת יותר אטרקטיבי, אנו יכולים לומר כי ECMAScript (או רשמית ECMA-262) הוא הסטנדרט המגדיר את האופן שבו אנו משתמשים ב- JavaScript, ואת מה שאנו יכולים להשיג עם זה.

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

תיעוד ES6 הוא נרחב, אם אתה רוצה לקרוא הרבה, אתה יכול להוריד את כל המפרטים מאתר האינטרנט של ECMA הבינלאומי. במאמר זה אנו נסתכל על 10 תכונות handpicked, למרות ES6 יש הרבה יותר להציע. אם אתה רוצה להתנסות עם זה, ES6 Fiddle הוא מקום נהדר לעשות זאת, ואתה יכול גם למצוא כמה קטעי קוד לדוגמה שם.

תמיכה ב- ECMAScript 6

ספקי הדפדפן כבר בהדרגה הוספת תמיכה בתכונות של ECMAScript 6. אתה יכול למצוא טבלת תאימות מגניב כאן על הדפדפן ומהדר תמיכה עבור תכונות חדשות.

אם אתה מעוניין תמיכה ES6 ב Node.js, לבדוק את המסמכים כאן.

אמנם לא כל התכונות נתמכות כרגע, אנחנו יכולים להשתמש transpilers כגון באבל כדי להזיז קוד ES6 שלנו ES5. יש תוסף Grunt מגניב עבור בבל, רבים תוסף ES6 מדהים עבור Grunt, ותוסף מדהים Gulp-Babel שם בחוץ, אז למרבה המזל יש לנו שפע של אפשרויות.

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

1. חדש תן מילת מפתח

ES6 מציג את החדש תן מילת מפתח המאפשרת לנו להכריז על משתנים מקומיים בהיקף של בלוק, כגון הצהרה, ביטוי או פונקציה (n פנימי). לדוגמה, אנו יכולים להכריז על ל לולאה בדרך הבאה, ולאחר מכן לעשות שימוש חוזר באותו שם משתנה (כמו היקף שלה מוגבל ל ל לולאה) בתוך הבא אם הצהרה you

 עבור (i = 0 i; < myArray.length; i++)  // Do something inside the block  if (x > 0 & x x! = Y) / אנחנו עושים שימוש חוזר "i" תן i = x * y

משתמש ב תן מילת מפתח מובילה לניקוי וקוד שמיש יותר. ההבדל בין תן ו var היא בהיקף, למשל משתנה מקומי שהוגדר על ידי var ניתן להשתמש במילת המפתח בכל הפונקציה המקיפה, ואילו משתנים שהוגדרו על ידי תן רק לעבוד בלוק שלהם (תת). תן יכול גם לשמש גלובלי, במקרה זה הוא מתנהג באותה צורה כמו var. כמובן, ב ES6 אנחנו עדיין יכולים להשתמש var אם אנחנו רוצים.

2. חדש .1 מילת מפתח

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

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; / / שגיאה שקטה, כפי שאנחנו לא יכולים להקצות ערך חדש קבוע

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

 const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); 22 22

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

 MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // error

3. פונקציות החץ

ECMAScript 6 מאפשר לנו כיצד לכתוב אנונימיות, כפי שאנו יכולים להשמיט לחלוטין את פונקציה מילת מפתח. אנחנו רק צריכים להשתמש בתחביר החדש עבור פונקציות החץ, על שם סימן החץ = (חץ שומן), המספק לנו קיצור דרך גדול.

 // 1. פרמטר אחד ב- ES6 מאפשר sum = (a, b) = a + b; // ב- ES5 var var = פונקציה (a, b) return a + b; ; // 2. ללא פרמטרים ב ES6 תן randomNum = () => Math.random (); // ב ES5 var randomNum = פונקציה () Return Math.random (); ; // 3. ללא החזרה ב ES6 תן הודעה = (שם) => התראה ("היי" + שם "!"); // ב ES5 var הודעה = פונקציה (yourName) התראה ("היי" + yourName + "!)); ;

יש הבדל חשוב בין פונקציות חץ רגיל, כי הוא פונקציות החץ לא מקבלים זה ערך כמו פונקציות שהוגדרו עם פונקציה מילת המפתח פועלת. פונקציות החץ לקשור באופן לקסיקאלי ה זה ערך להיקף הנוכחי. זה אומר שאנחנו יכולים בקלות לעשות שימוש חוזר זה מילת מפתח בתפקוד פנימי. ב ES5 זה אפשרי רק עם גרזן הבא:

 // ES5 האק להשתמש במילה "זה" בתפקוד פנימי ... addAll: function addAll (pieces) var self = this; _Eeach (חלקים, פונקציה (חתיכה) self.add (חתיכה);); , ... / ES6 אותה פונקציה פנימית עכשיו יכול להשתמש משלו "זה" (...) addAll: addAll כל הפונקציה (חתיכות) _.Each (חתיכות, חתיכת => this.add (חתיכה)); , ...

קוד לעיל הוא מ Mozilla Hacks

4. חדש התפשטות מפעיל

החדש התפשטות המפעיל מסומן עם 3 נקודות (...), ואנחנו יכולים להשתמש בו כדי לחתום על המקום של פריטים צפויים מרובים. אחד המקרים הנפוצים ביותר של מפעיל המפעיל הוא הוספת רכיבי מערך למערך אחר:

 תן myArray = [1, 2, 3]; בואו newArray = [... myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

אנחנו יכולים גם לקחת את המינוף של התפשטות מפעיל בשיחות פונקציונליות שבהן אנו רוצים להעביר טיעונים ממערך:

 תן myArray = [1, 2, 3]; (a, b, c) return a + b + c;  console.log (סכום (... myArray)); // 6

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

5. ערכי ברירת מחדל עבור פרמטרים ופרמטרים חדשים של מנוחה

חדשות טובות, כי ב- ECMAScript 6 אנו יכולים להוסיף ערכי ברירת מחדל לפרמטרים של פונקציה. משמעות הדבר היא שאם לא נעבור בוויכוחים בשלב מאוחר יותר בקריאת הפונקציה, ייעשה שימוש בפרמטרים המשמשים כברירת מחדל. ב ES5 ערכי ברירת המחדל של הפרמטרים נקבעים תמיד לא מוגדר, ולכן האפשרות החדשה להגדיר אותם לכל מה שאנחנו רוצים היא בהחלט שיפור גדול של השפה.

 (a = 2, b = 4) return a + b;  console.log (סכום ()); // 6 console.log (סכום (3, 6)); / 9

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

 function putInAlphabet (... args) let sorted = args.sort (); לחזור מיון;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); / a, c, c, e, i, m, p, r, s, t

6. חדש בשביל הצהרה

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

 תן myArray = [1, 2, 3, 4, 5]; תן סכום = 0; עבור (תן לי של myArray) sum + = i;  console.log (סכום); // 15 (= 1 + 2 + 3 + 4 + 5)

7. תבנית מילונים

ECMAScript 6 מספק לנו חלופה חדשה עבור שרשור מחרוזת. מילולי תבנית מאפשרים לנו ליצור בקלות תבניות שבהן אנו יכולים לשלב ערכים שונים לכל נקודה שאנו רוצים. לשם כך אנו צריכים להשתמש $ ... תחביר בכל מקום שבו ברצוננו להוסיף את הנתונים שאנו יכולים להעביר מתוך משתנים, מערכים או אובייקטים באופן הבא:

 let customer = title: 'Ms', firstname: 'ג'יין', שם משפחה: 'Doe', גיל: '34'; let template = 'דולר $ customer.title $ customer.firstname $ customer.surname! יום הולדת שמח! Customer.age! '; console.log (תבנית); / / גברת ג 'יין היקרה! יום הולדת שמח 34!

8. חוגים

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

בכיתות ES6 מצהירים עם החדש מעמד מילת מפתח, ואת צריכה להיות בנאי () שיטה הנקראת כאשר אובייקט חדש מופעל באמצעות new myClass () תחביר. אפשר גם להרחיב את השיעורים החדשים עם הילד מרחיב את האב תחביר זה יכול להיות מוכר בשפות אחרות מונחה עצמים כגון PHP. כמו כן חשוב לדעת כי בניגוד לתפקוד והצהרות משתנות, הצהרות המעמד אינן מובלות ב- ECMAScript 6.

 (גובה, רוחב) // class buildor this.name = 'פוליגון'; this.height = גובה; this.width = רוחב;  sayName () // class method console.log ('היי, אני', this.name + '.');  תן את myPolygon = מצולע חדש (5, 6); console.log (myPolygon.sayName ()); היי, אני מצולע.

קוד לעיל מ ES6 Fiddle דוגמאות, .

9. מודולים

האם תהית אי פעם על כמה מגניב זה יהיה אם JavaScript היה מודולרי? כמובן, היו דרכים לעקיפת הבעיה כגון CommonJS (בשימוש ב Node.js) או AMD (הגדרת מודול אסינכרוני) (המשמש RequireJS) לעשות את זה לפני, אבל ES6 מציג מודולים כתכונה יליד.

אנחנו צריכים להגדיר כל מודול בקובץ שלה, ולאחר מכן להשתמש יצוא מילת מפתח כדי לייצא משתנים ופונקציות ל קבצים אחרים, ואת ייבוא מילת מפתח כדי לייבא אותם מ קבצים אחרים, על פי התחביר הבא:

 // פונקציות. קוביית הפונקציה (a) return a * a * a;  פונקציה cubeRoot (א) Return Math.cbrt (a);  ייצוא cube, cubeRoot // או: ייצוא cube כמו cb, cubeRoot כמו cr app.js ייבוא ​​cube, cubeRoot מ 'פונקציות'; console.log (קוביה (4)); // 64 console.log (cubeRoot (125)); // 5

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

10. המון שיטות חדשות

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

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

 הפונקציה isPrime (אלמנט, אינדקס, מערך) var start = 2; בעוד (להתחיל <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, לא נמצא console.log ([4, 5, 8, 12] .find (isPrime)); // 5

קוד לעיל מ: Mozilla Dev