Aflați ES6 + în acest curs gratuit și interactiv, format din 23 de părți

JavaScript este, fără îndoială, unul dintre cele mai populare limbaje de programare din lume. Este folosit aproape peste tot: de la aplicații web la scară largă la servere complexe la dispozitive mobile și IoT.

Așa că am colaborat Dylan C. Israel– un program de programare YouTuber și Routech – și i-a cerut să creeze Introducere în cursul ES6 pe Scrimba.

Cursul conține 17 lecții și 4 provocări interactive. Este pentru dezvoltatorii JavaScript care doresc să învețe caracteristicile moderne ale JavaScript introduse în ES6, ES7 și ES8.

Să aruncăm o privire asupra structurii cursului:

Partea # 1: Introducere

În videoclipul introductiv, Dylan oferă o prezentare generală a aspectului cursului său și a subiectelor principale pe care le va atinge. De asemenea, îți oferă o prezentare despre el însuși, astfel încât să-l cunoști înainte de a sări în chestiunile de codare.

Partea # 2: Litere de șablon

Prima caracteristică a ES6 pe care o acoperă cursul este literalele șablonului. Literalele șablonului sunt un mod mai curat și mai frumos de a juca cu corzi. Ei scapă de nevoia de mult + semne pentru a concata șiruri.

let str1 = 'My name is:'  
let name="Dylan";

let str2 = `${str1} ${name}`

// --> 'My name is: Dylan'

Literalele șablonului încep cu un backtick și folosim $ semne și paranteze crețate pentru a introduce o variabilă între ele.

Partea # 3: Destructurarea obiectelor

În partea 3, veți învăța cum să deconstruiți un obiect și să extrageți proprietățile care vă interesează.

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

let { firstName, lastName } = information;

În codul de mai sus, extragem proprietățile firstName și lastName din obiect și le atribuim variabilelor folosind Destructurarea obiectelor.

Partea # 4: Matrice de destructurare

În această parte, veți afla cum să obțineți indicatorul elementului care ne interesează din matrice utilizând distrugerea matricei.

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

Aici, firstName este îndreptat spre primul element din matrice din partea dreaptă. De asemenea, putem crea mai mulți indicatori în partea stângă a elementelor din matricea noastră.

Partea # 5: Literal obiect

În partea 5 a cursului nostru, vom învăța o altă caracteristică interesantă a ES6, care este obiectul literal. Literalele pentru obiecte vă permit să omiteți cheia din obiect dacă numele cheii și valoarea sunt aceleași.

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

Deci, în exemplul de mai sus, am vrut să adăugăm proprietatea lui firstName în a noastră information obiect. firstName variabila este o altă variabilă cu același nume. Omitem cheia și trecem doar numele variabilei și aceasta va crea proprietatea și va atribui valoarea în sine.

Partea # 6: Obiect Literal (Provocare)

Acum este timpul pentru prima provocare a cursului! Scopul aici este de a consola jurnalul noului oraș, noua adresă și țara cu acesta.

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

Sunteți încurajați să utilizați subiectele pe care le-am învățat până acum pentru a rezolva această problemă. Aceasta include Literalele șablonului, Distrugerea obiectelor și Literalele obiectelor.

Partea # 7: Pentru … Of Loop

În partea 7, veți afla despre un nou mod de a parcurge elemente. ES6 a introdus o instrucțiune For … Of loop, care creează o buclă care iterează peste obiecte iterabile precum String, Array, NodeList obiecte și multe altele.

let str="hello";

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

În exemplul de cod de mai sus, bucla For … Of se bucură peste un șir și deconectează caracterele.

Partea # 8: Pentru … provocarea Loop

În această provocare, vi se cere să ghiciți ce se întâmplă când utilizați let peste const în interiorul unui for…of buclă și să încerce să manipuleze valorile din buclă.

let incomes = [62000, 67000, 75000];

for (const income of incomes) {

}  
console.log(incomes);

Partea # 9: Operator Spread

În partea 9 a cursului, veți afla despre una dintre cele mai tari caracteristici incluse în ES6: Spread Operator.

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

// arr3 = [1, 2, 3, 4, 5, 6];

Codul de mai sus demonstrează una dintre numeroasele implementări interesante ale utilizării operatorului spread. Aici combinăm două tablouri punându-le într-o nouă matrice cu trei puncte (…) în fața numelui matricei.

Partea # 10: Operator de odihnă

În această lecție, veți învăța câteva cazuri de utilizare pentru operatorul Rest. Operatorul Rest ne ajută să gestionăm parametrii funcției într-un mod mai bun, permițându-ne să reprezentăm numărul variabil al parametrilor funcției ca o matrice.

function findLength(...args) {  console.log(args.length);}

findLength();  // 0
findLength(1); // 1
findLength(2, 3, 4); // 3

Aici, apelăm aceeași funcție cu un număr diferit de parametri, iar operatorul Rest se ocupă de asta perfect pentru noi.

Partea # 11: Funcții săgeată

Această lecție ne învață una dintre cele mai tari și mai discutate caracteristici introduse în ES6: Arrow Functions. Funcțiile săgeată au schimbat modul în care scriem funcțiile.

const square = num => num * num;


square(2); // 4

Prin utilizarea funcției săgeată, aspectul unui pătrat funcția a fost complet schimbată. Într-o singură linie de cod, putem returna pătratul unui număr. Funcțiile săgeată au o mulțime de alte implementări minunate, care sunt explicate în lecție.

Partea # 12: Parametri impliciti

Parametrii impliciți ne permit să inițializăm funcțiile cu valoarea implicită. În această lecție, veți afla cât de utilă poate fi această caracteristică în activitățile de codare din viața reală, deoarece vă ajută să evitați erorile și erorile. Un exemplu simplu de parametri impliciți ar fi:

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

sum(5); // 6

Aici stabilim valoarea implicită a b astfel încât, atunci când nu trecem nici o valoare de b, va folosi valoarea implicită pentru calcularea rezultatului.

Partea # 13: include ()

Folosind includes metoda, putem afla dacă un șir conține un anumit caracter sau un șir. În această lecție, veți afla în detaliu despre cazurile de utilizare practice ale acestei funcții.

let str="Hello World";

console.log(str.includes('hello')); // true

Aici, aflăm dacă șirul nostru conține sub șirul de hello. După cum puteți vedea, metoda include returnează fie adevărat, fie fals în funcție de condiția potrivită sau nu.

Partea # 14: Let and Cost

Poate că cea mai importantă caracteristică a ES6 sunt cele două noi cuvinte cheie pentru declararea variabilelor: let și const.

let str="Hello World";

const num = 12345;

Folosind let, putem crea variabile care pot fi modificate ulterior în program. Variabile declarate cu const nu se poate schimba niciodată. Vom afla despre ele în această lecție.

Partea # 15: Import și export

Știm cu toții cât de important este să ai un cod modular, mai ales dacă lucrezi la aplicații la scară largă. Cu import și export declarații în JavaScript, a devenit extrem de ușor și curat să declare și să utilizeze module.

În partea 15 a acestui curs, veți învăța cum să utilizați declarațiile de export și import pentru a crea module.

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

În codul de mai sus, exportăm o funcție cu numele de double. Apoi importăm funcția într-un fișier separat:

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

Partea # 16: padStart () și padEnd ()

ES2017 a introdus două noi metode de manipulare a șirurilor, pe care le veți învăța în detaliu în această parte. padStart și padEnd va adăuga pur și simplu padding la începutul și la sfârșitul șirului.

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

str.padEnd(3); // 'Hello   '

Partea # 17: padStart () și padEnd () provocare

În această parte, veți aborda a treia provocare a acestui curs. Este un mic test în care Dylan vă cere mai întâi să ghiciți, apoi vă explică ce se întâmplă când rulează următorul cod

let example="YouTube.com/CodingTutorials360";

// console.log(example.padStart(100));  
// console.log(example.padEnd(1));

Partea # 18: Cursuri

Clasele au fost introduse în ES6 și au intensificat complet jocul pentru utilizarea modelelor orientate pe obiecte în JavaScript. Deși este pur și simplu zahăr sintactic față de moștenirea prototipică existentă a JavaScript-ului, a facilitat scrierea într-un mod mai orientat obiect.

Deci, în această lecție, veți învăța în detaliu cum puteți utiliza cursurile și să profitați de caracteristicile OOP, cum ar fi, de exemplu, moștenirea. Mai jos este un exemplu simplu de utilizare a claselor.

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

Aici, creăm o clasă simplă de mașini în care avem un constructor care atribuie roțile și ușile. De asemenea, avem o metodă care înregistrează numărul de uși și roți ale mașinii.

Apoi, creăm o nouă instanță și trecem valorile roților și ușilor. În cele din urmă, numim describeMe metoda pe ea.

Partea # 19: virgule finale

În lecția 19, veți învăța cum să utilizați virgulele finale. Acestea facilitează adăugarea de elemente, proprietăți sau atribute noi în codul dvs., deoarece puteți face acest lucru fără să vă faceți griji cu privire la adăugarea unei virgule la elementul anterior.

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

Acesta a fost doar un simplu exemplu de utilizare a virgulelor finale. Veți afla mai multe despre ele în lecția noastră în timpul cursului nostru.

Partea # 20: Async & Await

Async & Await este caracteristicile mele preferate ale ES6. Cu Async & Await, putem scrie cod asincron care arată ca un cod sincron. Aceasta este curată, ușor de citit și ușor de înțeles. Deci, în această lecție, veți învăța câteva exemple practice despre cum să o utilizați.

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

În exemplul de mai sus, am folosit cuvântul cheie await înainte de declarația fetch, deci va aștepta până când rezultatul acestui API va fi preluat înainte de a trece la următoarea linie.

Partea # 21: Async & Await (Provocare)

Aceasta este ultima provocare a acestui curs și este, desigur, despre Async & Await. Vi se va cere să încercați mai întâi să convertiți următorul cod bazat pe promisiuni în Async & Await:

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

Nu vă faceți griji dacă nu o puteți rezolva complet. Dylan va explica în detaliu cum să o facă. Până la sfârșitul lecției, veți avea suficientă încredere pentru a începe să o utilizați imediat.

Partea # 22: Seturi

În ultima prelegere a cursului, veți afla despre o structură de date foarte importantă, Set. Acesta este un obiect care vă permite să stocați valori unice. Deci, ori de câte ori doriți să aveți o colecție care conține doar valori unice, puteți utiliza seturi.

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

Partea # 23: Ce urmează?

Pentru a încheia cursul, Dylan vă oferă câteva sfaturi despre cum să continuați această învățare și să îmbunătățiți codul pe care îl scrieți astăzi.

Si asta e! Dacă ajungi până aici, poți să-ți dai o palmă pe spate! Ați finalizat cursul și sunteți cu un pas mai aproape de a deveni un ninja JavaScript.

Mulțumesc pentru lectură! Numele meu este Per, sunt cofondatorul Scrimba și îmi place să îi ajut pe oameni să învețe noi abilități. Urmărește-mă Stare de nervozitate dacă doriți să fiți informat despre articole și resurse noi.

Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptivdacă doriți să învățați să construiți un site web modern la nivel profesional.