البدء في ES6 باستخدام بعض الأشياء المفضلة لدي

يرشدك هذا البرنامج التعليمي عبر بعض الخطوات السهلة لبدء تعلم أحدث إصدار من JavaScript: ES6.

للتعرف على اللغة ، سوف نتعمق في بعض ميزاتي المفضلة. ثم سأقدم قائمة مختصرة ببعض الموارد الرائعة لتعلم ES6.

ES6 أو ECMAScript 2015؟

"ما في الاسم؟"

- جولييت من مسرحية "روميو وجولييت" لشكسبير

الاسم الرسمي للإصدار السادس من ECMAScript هو ECMAScript 2015 ، حيث تم الانتهاء منه في يونيو 2015. ومع ذلك ، بشكل عام ، يبدو أن الناس يشيرون إليه ببساطة باسم ES6 .

في السابق ، كان عليك استخدام ناقل مثل Babel لبدء استخدام ES6. الآن ، يبدو أن الجميع تقريبًا باستثناء Microsoft Internet Explorer يدعم معظم الميزات في ES6. لكي نكون منصفين ، تدعم Microsoft ES6 في Edge. إذا كنت تريد المزيد من التفاصيل ، فقم بإلقاء نظرة على جدول توافق kangax .

بيئة التعلم ES6

أفضل طريقة لتعلم ES6 هي كتابة وتشغيل ES6. قد تكون هناك طرق للقيام بذلك. لكن الاثنين اللذين أستخدمهما عندما أجرب هما:

  • Node.js
  • صفحة جربها في Babel.io

Node.js و Visual Studio Code

واحدة من أفضل الطرق لاستكشاف مجاملات ES6 هي كتابة التعليمات البرمجية الخاصة بك في محرر مثل Visual Studio Code ثم تشغيلها في Node.js

قم بتثبيت Visual Studio Code وقم بإنشاء ملف يسمى helloworld.js. الصق الكود التالي في:

console.log('Hello world');

احفظها. يجب أن يبدو مثل هذا:

منذ الإصدار 6.5 ، دعم Node.js معظم معايير ES6. لتشغيل مثالنا ، افتح موجه الأوامر Node.js إلى مجلدك حيث أنشأت helloworld.jsالملف. واكتب فقط:

node helloworld.js

يتم console.logطباعة بياننا كناتج:

Babel.io

إنه ليس ممتعًا مثل Node.js ، ولكن الطريقة المناسبة لتشغيل كود ES6 هي صفحة جربه على Babel.io. قم بتوسيع الإعدادات وتأكد من تحديد تقييم . ثم افتح وحدة تحكم المتصفح .

اكتب ES6 في العمود الموجود على اليسار. يقوم Babel بترجمته إلى JavaScript عادي. يمكنك استخدام console.logورؤية الإخراج في Web Console على اليمين.

بعض ميزاتي المفضلة

"هذه بعض الأشياء المفضلة لدي."

- ماريا من رودجرز و "صوت الموسيقى" لهامرشتاين

في هذا القسم ، سنلقي نظرة سريعة على بعض الميزات الجديدة لـ ES6 بما في ذلك:

  • باستخدام letو constبدلا منvar
  • دالات السهم
  • سلاسل القالب
  • التدمير

const ودع Versus var

الآن بعد أن قمت بالترميز في ES6: توقف عن الاستخدام var! على محمل الجد ، لا تستخدم varمرة أخرى.

من الآن فصاعدًا ، استخدم إما constأو let. استخدم constعندما تحدد القيمة مرة واحدة. استخدم letعندما تنوي تغيير القيمة.

let bar = { x: 'x'};const foo = { x: 'x'};
bar.x = 'other'; // This is finefoo.x = 'other'; // This is fine
bar = {}; // This is also finefoo = {}; // This will throw an error

عادةً ما أحب استخدام constأولاً. ثم إذا اشتكى ، ألقي نظرة على الكود الخاص بي وأتأكد من أنني بحاجة حقًا إلى أن أكون قادرًا على تعديل المتغير. إذا كان الأمر كذلك ، فقد قمت بتغييره إلى let.

Make sure you check out the resources later in this article for more information on let and const. You will see that they work much more intuitively than var.

Arrow Functions

Arrow functions are one of the defining features of ES6. Arrow functions are a new way to write functions. For example, the following functions work identically:

function oneMore(val){ return val+1;}console.log('3 and one more is:', oneMore(3));
const oneMore = (val) => val+1;console.log('3 and one more is:', oneMore(3));

There are a few things to remember about arrow functions:

  • They automatically return the computed value.
  • They have lexical this.

This first time I saw this I wondered, “What in the wide world is a lexical this? And, do I really care?” Let’s look at an example of why the lexical this is so useful and how it makes our code so much more intuitive:

In lines 1–31, we define a Class called ThisTester. It has two functions thisArrowTest() and thisTest() that basically do the same thing. But, one uses an arrow function and the other uses the classic function notation.

On line 33, we create an new object myTester based on our ThisTester class and call the two functions in our class.

const myTester = new ThisTester();console.log('TESTING: thisArrowTest');myTester.thisArrowTest();console.log('');console.log('TESTING: thisTest');myTester.thisTest();

In the thisTest() function, we see that it tries to use this in line 26.

console.log('function this fails', this.testValue);

But, it fails because that function gets its own this and it isn’t the same this as the class. If you think this is confusing, that’s because it is. It isn’t intuitive at all. And, new developers sometimes spend their first week fighting with this in callback functions and promises like I did.

Eventually, after reviewing a bunch of examples, I figured out the standard “trick” of using a variable called self to hold onto the this that we want to use. For example, in line 17:

let self = this;

However, notice how in the arrow function in line 10, we can directly access this.testValue and magically it works:

let myFunction = (x) =>console.log('arrow "this" works:', this.testValue)

That is lexical this in action. The this in the arrow function is the same as the this in the surrounding function that calls it. And hence we can intuitively use this to access the properties in our object like this.testValue.

Template Strings

Template Strings (sometimes called Template Literals) are an easy way to construct strings. They are great for multi line strings such as those used in Angular templates. Template Strings use the back tick ` instead of quote or apostrophe.

Here is an example of creating a long, multi-line string:

const myLongString = `This stringactually spans many lines.And, I don't even need to use any "strange"notation.`;console.log (myLongString);

You can easily bind variables to your string, for example:

const first = 'Todd', last = 'Palmer';console.log(`Hello, my name is ${first} ${last}.`)

Looking at that variable assignment begs the question:

“What if I need to use the $, {, or } characters in my string?”

Well, the only one that needs special treatment is the sequence ${.

console.log(`I can use them all separately $ { }`);console.log(`$\{ needs a backslash.`);

Template Strings are especially useful in Angular and AngularJS where you create HTML templates, because they tend to be multi-line and have a lot of quotes and apostrophes. Here is what a small example of an Angular Template leveraging the back tick looks like:

import { Component } from '@angular/core';
@Component({ selector: 'app-root', template: ` 

{{title}}

My favorite hero is: {{myHero}}

`})export class AppComponent { title = 'Tour of Heroes'; myHero = 'Windstorm';}

Destructuring

Destructuring lets you take parts of an object or array and assign them to your own named variables. For more information on Destructuring, check out my article on ITNEXT.

ES6 Resources

That was just a quick overview of a few of the new features in ES6. Here are some great resources for continuing your journey down the path of learning ES6:

  • Learn ES2015 on Babel

    This is an overview of all the new features. Although it doesn’t go into much depth, this is a great page to keep as a quick reference with examples.

  • نصائح وحيل ES6 لجعل التعليمات البرمجية أكثر وضوحًا وأقصر وأسهل في القراءة! بواسطة سام ويليامز

    هذه مقالة رائعة في منشور Free Code Camp المتوسط.

  • سلسلة فيديو MPJ: ميزات JavaScript ES6

    إذا كنت تفضل مقاطع الفيديو ، فإن MPJ هو الرجل المناسب لك. إنه ليس جيدًا تقنيًا فحسب ، بل إن أغراضه مسلية حقًا.

  • ES6 في سلسلة Depth على Mozilla Hacks

    هذه سلسلة ممتازة في العمق.

  • سلسلة إريك إليوت تأليف البرمجيات

    اقرأ هذا لتحدي حقيقي. كن حذرًا ، فبعض أشياء إريك هي علوم الكمبيوتر على مستوى الكلية.

يستند هذا المقال إلى محاضرة ألقيتها في مارس 2018.