Tanulja meg az ES6 + -ot ezen az ingyenes és interaktív, 23 részes tanfolyamon

A JavaScript kétségtelenül az egyik legnépszerűbb programozási nyelv a világon. Szinte mindenhol használják: a nagyszabású webalkalmazásoktól a komplex szervereken át a mobil és IoT eszközökig.

Szóval együttműködünk Dylan C. Israelrel - egy programozó YouTuber és freeCodeCamp grad programmal -, és megkértük, hogy készítsen Bevezetés az ES6-ba tanfolyamot a Scrimba-n.

A tanfolyam 17 órát és 4 interaktív kihívást tartalmaz. Olyan JavaScript-fejlesztőknek szól, akik meg akarják tanulni a JavaScript ES6, ES7 és ES8-ban bevezetett modern funkcióit.

Vessünk egy pillantást a tanfolyam felépítésére:

1. rész: Bevezetés

A bevezető videóban Dylan áttekintést nyújt arról, hogy milyen lesz a tanfolyama, és milyen fő témákat fog érinteni. Bevezetést is ad magáról, hogy ismerkedjen meg vele, mielőtt beleugrik a kódoló dolgokba.

2. rész: Template Literals

Az ES6 első jellemzője, amelyet a tanfolyam lefed, a sablon literálok. A sablon literálok tisztább és szebb módja a húrokkal való játéknak. Megszabadulnak attól, hogy sok +jel szükséges a húrok összefűzéséhez.

let str1 = 'My name is:' let name = 'Dylan'; let str2 = `${str1} ${name}` // --> 'My name is: Dylan' 

A sablon literálok backtick-kel kezdődnek, és a $jel és a göndör zárójelek segítségével egy változót vezetünk be a kettő között.

3. rész: Objektumok szerkezetátalakítása

A 3. részben megtudhatja, hogyan kell felépíteni egy objektumot és kivonni az érdeklődésre számot tartó tulajdonságokat.

let information = { firstName: 'Dylan', lastName: 'Israel'}; let { firstName, lastName } = information; 

A fenti kódban kivonjuk a tulajdonságokat firstNameés lastNameaz objektumot, és az Object Destructure segítségével változókhoz rendeljük őket.

4. rész: Destrukturáló tömbök

Ebben a részben megtudhatja, hogyan lehet a tömb elpusztításával lekérni az érdeklődő elem mutatóját a tömbből.

let [ firstName ] = ['Dylan', 'Israel']; 

Itt firstNamea jobb oldali tömb első eleme felé mutat. A tömbben található elemek bal oldalán további mutatókat is létrehozhatunk.

5. rész: Object Literal

Tanfolyamunk 5. részében megtanuljuk az ES6 egy másik jó tulajdonságát, amely az Object Literal. Az Object Literals lehetővé teszi a kulcs kihagyását az objektumban, ha a kulcs neve és értéke megegyezik.

let firstName = 'Dylan'; let information = { firstName }; 

Tehát a fenti példában, azt akartuk, hogy adjunk tulajdonát firstNamemi informationobjektumot. A firstNameváltozó egy másik azonos nevű változó. Elhagyjuk a kulcsot, és csak átadjuk a változó nevét, és ez létrehozza a tulajdonságot, és maga hozzárendeli az értéket.

6. rész: Object Literal (Kihívás)

Itt az ideje a tanfolyam első kihívásának! A cél itt az új várost, az új címet és az országot konzolosan naplózni.

function addressMaker(address) { const newAddress = { city: address.city, state: address.state, country: 'United States' }; ... } 

Javasoljuk, hogy a probléma megoldására használja az eddig tanult témákat. Ide tartoznak a sablon-irodalom, az objektum-megsemmisítés és az objektum-irodalom.

7. rész: A hurok számára

A 7. részben megismerheti az elemek közötti hurokolás új módját. Az ES6 bevezette a For ... Of ciklus utasítást, amely létrehoz egy ciklust, amely iterálható objektumokon, például String, Array, NodeList objektumokon és másokon keresztül ismétlődik.

let str = 'hello'; for (let char of str) { console.log(char);}// "h"// "e"// "l"// "l"// "o" 

A fenti kódpéldában a For… Of hurok egy húrra hurkol, és naplózza a karaktereket.

8. rész: A hurok kihívására

Ebben a kihívás, akkor megkérdezi kitalálni, hogy mi történik, ha használja letfelett constbelsejében egy for…ofhurok, és hogy megpróbálják manipulálni az értékeket a cikluson belül.

let incomes = [62000, 67000, 75000]; for (const income of incomes) { } console.log(incomes); 

9. rész: Spread Operator

A tanfolyam 9. részében megismerheti az ES6 egyik legkiválóbb funkcióját: a Spread Operator programot.

let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [...arr1, ...arr2]; // arr3 = [1, 2, 3, 4, 5, 6]; 

A fenti kód a spread operátor használatának számos jó megvalósításának egyikét mutatja be. Itt két tömböt ötvözünk úgy, hogy egy új tömbbe helyezzük őket, három ponttal (…) a tömb neve előtt.

10. rész: Ültető kezelő

Ebben a leckében megtanul néhány felhasználási esetet a Rest operátor számára. A Rest operátor segít a funkcióparaméterek jobb kezelésében azáltal, hogy lehetővé teszi számunkra, hogy tömbként ábrázoljuk a függvényparaméterek változó számát.

function findLength(...args) { console.log(args.length);} findLength(); // 0 findLength(1); // 1 findLength(2, 3, 4); // 3 

Itt ugyanazt a függvényt hívjuk meg különböző számú paraméterrel, és a Rest operátor ezt tökéletesen kezeli számunkra.

11. rész: Nyílfunkciók

Ez a lecke megtanítja nekünk az ES6 egyik legmenőbb és legtöbbet beszélt funkcióját: Arrow Functions. A nyílfüggvények megváltoztatták a függvények írásmódját.

const square = num => num * num; square(2); // 4 

A nyílfüggvény használatával a négyzetfüggvény megjelenése teljesen megváltozott. Csak egyetlen kódsorban tudjuk visszaadni egy szám négyzetét. A nyílfüggvényeknek sok más fantasztikus megvalósítása van, amelyeket a lecke ismertet.

Part #12: Default Parameters

Default parameters allow us to initialise functions with the default value. In this lesson, you will learn how helpful this feature can be in real life coding tasks, as it helps you avoid errors and bugs. A simple example of default parameters would be:

function sum (a, b = 1) { return a + b; } sum(5); // 6 

Here we are setting the default value of b so that when we do not pass any value of b, it will use the default value for calculating the result.

Part #13: includes()

Using the includes method, we can find out if any string contains a particular character or a substring. In this lesson, you will learn in detail about the practical use-cases of this function.

let str = 'Hello World'; console.log(str.includes('hello')); // true 

Here, we find out if our string contains the substring of hello. As you can see, the includes method returns either true or false depending on whether or not the condition is matching.

Part #14: Let and Cost

Perhaps the most important feature of ES6 is the two new keywords for declaring variables: let and const.

let str = 'Hello World'; const num = 12345; 

Using let, we can create variables which can be changed later in the program. Variables declared with const can never be changed. We will learn about them in this lesson.

Part #15: Import and Export

We all know how important it is to have modular code, especially if you are working on large-scale applications. With import and export statements in JavaScript, it has become extremely easy and clean to declare and use modules.

In part 15 of this course, you will learn how to use export and import statements to create modules.

// exports function export function double(num) { return num * num; } 

In the code above, we are exporting a function by the name of double. We’re then importing the function in a separate file:

// imports function import { double } from '..filepath/filename 

Part #16: padStart() and padEnd()

ES2017 introduced two new methods to manipulate strings, which you will learn in detail in this part. padStart and padEnd will simply add padding at the start and end of the string.

let str = 'Hello'; str.padStart(3); // ' Hello' str.padEnd(3); // 'Hello ' 

Part #17: padStart() and padEnd() challenge

In this part, you’ll tackle the third challenge of this course. It’s a small quiz in which Dylan first asks you to guess, and then explains what happens when the following code runs

let example = 'YouTube.com/CodingTutorials360'; // console.log(example.padStart(100)); // console.log(example.padEnd(1)); 

Part #18: Classes

Classes were introduced in ES6, and they have completely stepped up the game for using Object Oriented Patterns in JavaScript. Although it is simply syntactical sugar over JavaScript’s existing prototypical inheritance, it has made it easier to write in a more object-oriented way.

So in this lesson, you will learn in detail how you can use classes and take the benefit of OOP features like, for example, inheritance. Below is a simple example of using classes.

class Car { constructor(wheels, doors) { this.wheels = wheels; this.doors = doors; } describeMe() { console.log(`Doors: ${this.doors} and Wheels: ${this.wheels}`); }} const car1 = new Car(4, 2); car1.describeMe(); // Doors: 2 and Wheels: 4 

Here, we create a simple Car class in which we have a constructor assigning the wheels and doors. We also have a method which logs the number of doors and wheels of the car.

Then, we create a new instance and pass the values of wheels and doors. Finally, we call the describeMe method on it.

Part #19: Trailing Commas

In lesson 19, you will be learning how to use trailing commas. They make it easier to add new elements, properties, or attributes to your code, as you can do so without having to worry about adding a comma to the previous element.

let arr = [ 1, 2, 3, ];arr.length; // 3 

This was just a simple example of using trailing commas. You will learn more about them in our lesson during our course.

Part #20: Async & Await

Async & Await is my favourite features of ES6. With Async & Await, we can write asynchronous code which looks like synchronous code. This is clean, easy to read, and easy to understand. So in this lesson, you’ll learn a few practical examples of how to use it.

let response = await fetch('//example.com/books'); console.log('response'); 

In the example above, we have used the await keyword before the fetch statement, so it will wait until the result of this API has been fetched before moving forward to the next line.

Part #21: Async & Await (Challenge)

This is the last challenge of this course, and it is of course about Async & Await. You will be asked to first try converting the following promise-based code into using Async & Await:

function resolveAfter3Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 3000); }); } 

Don’t worry if you can’t solve it completely. Dylan will explain in detail how to do it. By the end of the lesson, you will be confident enough to start using it immediately.

Part #22: Sets

In the final lecture of the course, you will be learning about a very important data structure, Set. This is an object which lets you store unique values. So whenever you want to have a collection which contains only unique values, you can use Sets.

const set1 = new Set([1, 2, 3, 4, 5]); 

Part #23: What’s next?

Click the image to get to the course

To wrap up the course, Dylan gives some tips on how to take this learning on further and improve the code you write today.

And that’s it! If you get this far you can give yourself a pat on the back! You’ve completed the course and are one step closer to becoming a JavaScript ninja.

Thanks for reading! My name is Per, I’m the co-founder of Scrimba, and I love helping people learn new skills. Follow me on Twitter if you’d like to be notified about new articles and resources.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.