Aflati ES6 in acest curs gratuit de 28 de parti
Faceți clic aici pentru a ajunge la curs.

Ca parte a colaborării noastre cu Routech, instructorul lor eminent Beau Carnes și-a transformat întregul curriculum ES6 într-un curs interactiv Scrimba pe care îl poți urmări astăzi.

După cum s-ar putea să știți, ES6 este doar o modalitate de a descrie funcții JavaScript mai noi care nu au fost acceptate pe deplin și pe scară largă până în 2017. Acum, aproape toate JavaScript sunt scrise folosind funcții ES6, astfel încât acest curs vă pregătește să deveniți un dezvoltator JavaScript modern.

În acest articol, voi lista capitolele și vă voi oferi o frază sau două despre aceasta. În acest fel, ar trebui să puteți judeca rapid dacă acest curs vi se pare interesant.

Dacă da, asigurați-vă că îndreaptă-te spre Scrimba pentru a o urmări!

1. Introducere

În primul screencast, Beau vă oferă o introducere rapidă la curs și la el însuși și vorbește puțin despre ES6. De asemenea, vă arată cum puteți găsi programa dacă doriți să o parcurgeți mai departe site-ul Routech de asemenea.

2. Explorează diferențele dintre var și lasă cuvinte cheie

Primul subiect este variabilele. În ES5 am putut declara doar variabile cu var, dar începând cu ES6 putem folosi acum let și const.

Cum sunt let și var diferit? let nu vă permite să declarați o variabilă de două ori.

var catName = "Quincy";  
var catName = "Beau";  
// Works fine!

let dogName = "Quincy";  
let dogName = "Beau";  
// Error: TypeError: unknown: Duplicate declaration "dogName"

3. Comparați domeniile var și lăsați Cuvinte cheie

O altă diferență majoră între var și let este modul în care sunt vizate (ghidul Routech privind domeniul de aplicare).

Când declarați o variabilă cu var este declarat global sau local dacă se află în interiorul unei funcții.

Când este declarat cu let s-ar limita la o declarație de bloc sau la un domeniu de expresie.

Beau vă arată două exemple.

Faceți clic pe o imagine pentru a merge la distribuția Scrimba
Faceți clic pe o imagine pentru a merge la distribuția Scrimba
Clic aici pentru a merge la distribuția Scrimba

4. Declarați o variabilă numai în citire cu cuvântul cheie const

const este o modalitate de a atribui o variabilă numai în citire care nu poate fi realocată.

const fcc = "Routech";  
const sentence = fcc + " is cool!";  
sentence = fcc + " is amazing!";  
// Error: SyntaxError: unknown: "sentence" is read-only

5. Mutați o matrice declarată cu const

Ar trebui să fii atent cu const, deși este încă posibilă mutarea matricilor atribuite cu acesta.

const myArray = [5, 7, 2];

myArray[0] = 2;  
myArray[1] = 7;  
myArray[2] = 5;

console.log(myArray);   
// [2, 7, 5]

Același lucru se aplică obiectelor.

6. Prevenirea mutației obiectelor

Pentru a evita mutația obiectului și a matricei, puteți utiliza Object.freeze():

const MATH_CONSTANTS = {  
  PI: 3.14  
};

Object.freeze(MATH_CONSTANTS);  
MATH_CONSTANTS.PI = 99;

// TypeError: Cannot assign to read-only property 'PI' of object '#<Object>'

Dacă doriți să înghețați matricele, puteți utiliza și Object.freeze() și treceți matricea, dar s-ar putea să nu funcționeze pe unele browsere vechi.

7. Utilizați funcțiile săgeată pentru a scrie funcții anonime concise

ES6 introduce, de asemenea, un mod mai scurt de scriere a funcțiilor anonime.

// ES5 anonymous function  
var magic = function() {  
  return new Date();  
};

// A shorter ES6 arrow function  
var magic = () => {  
  return new Date();  
};

// And we can shorten it even further  
var magic = () => new Date();

8. Scrieți funcții săgeată cu parametri

Trecerea parametrilor la funcțiile săgeată este, de asemenea, ușoară.

var myConcat = (arr1, arr2) => arr1.concat(arr2);

console.log(myConcat([1, 2], [3, 4, 5]));  
// [1, 2, 3, 4, 5]

9. Scrieți funcții săgeată de ordine superioară

Funcțiile săgeți strălucesc atunci când sunt utilizate cu funcții de ordin superior, cum ar fi map(), filter(), reduce().

1611469867 559 Aflati ES6 in acest curs gratuit de 28 de parti
Faceți clic aici pentru a merge la distribuția Scrimba

10. Setați parametrii impliciți pentru funcțiile dvs.

Dacă unii dintre parametrii funcției noastre pot fi setați la o valoare implicită, așa puteți face în ES6:

// If value parameter is not passed in, it will be assigned to 1.   
function increment(number, value = 1) {  
  return number + value;  
};

console.log(increment(5, 2)); // 7  
console.log(increment(5)); // 6

11. Utilizați Rest Operator cu parametrii funcției

Operatorul Rest vă permite să creați o funcție care acceptă un număr variabil de argumente.

function sum(...args) {  
  return args.reduce((a, b) => a + b);  
};

console.log(sum(1, 2, 3)); // 6  
console.log(sum(1, 2, 3, 4)); // 10

12. Utilizați operatorul Spread pentru a evalua matricele la fața locului

răspândire operatorul arată exact ca odihnă operator și arată astfel: , dar extinde o matrice deja existentă în părți individuale.

const monthsOriginal = ['JAN', 'FEB', 'MAR'];

let monthsNew = [...monthsOriginal];  
monthsOriginal[0] = 'potato';

console.log(monthsOriginal); // ['potato', 'FEB', 'MAR']  
console.log(monthsNew); // ['JAN', 'FEB', 'MAR']

13. Utilizați Atribuirea destructurării pentru a atribui variabile din obiecte

Destructurarea este o sintaxă specială pentru atribuirea corectă a valorilor luate direct de la un obiect la o nouă variabilă.

// Object we want to destructure  
var voxel = {x: 3.6, y: 7.4, z: 6.54 };

// This is how we would do it in ES5  
var a = voxel.x; // a = 3.6  
var b = voxel.y; // b = 7.4  
var c = voxel.z; // c = 6.54

// A shorter ES6 way  
const { x : a, y : b, z : c } = voxel;   
// a = 3.6, b = 7.4, c = 6.54

14. Utilizați Atribuire destructurare pentru a atribui variabile din obiecte imbricate

Puteți utiliza destructurarea pentru a obține valori din obiecte chiar imbricate:

const LOCAL_FORECAST = {  
  today: { min: 72, max: 83 },  
  tomorrow: { min: 73.3, max: 84.6 }  
};

function getMaxOfTmrw(forecast) {  
  "use strict";

// we get tomorrow object out of the forecast  
  // and then we create maxOfTomorrow with value from max  
  const { tomorrow : { max : maxOfTomorrow }} = forecast;

return maxOfTomorrow;  
}  
console.log(getMaxOfTmrw(LOCAL_FORECAST));  
// 84.6

15. Utilizați Atribuirea destructurării pentru a atribui variabile din matrice

Vă întrebați dacă destructurarea poate fi utilizată cu tablouri? Absolut! Există însă o diferență importantă. În timp ce matricile de destructurare, nu puteți specifica o valoare pe care doriți să o introduceți într-o anumită variabilă și toate merg în ordine.

const [z, x, , y] = [1, 2, 3, 4, 5, 6];

// z = 1;  
// x = 2;   
// Skip 3  
// y = 4;

16. Utilizați atribuirea de destructurare cu operatorul Rest pentru a reatribui elemente de matrice

Să combinăm acum operatorul de repaus cu destructurarea pentru a ne supraîncărca abilitățile ES6.

const list = [1,2,3,4,5,6,7,8,9,10];

// Create a and b out of first two members  
// Put the rest in a variable called newList  
const [ a, b, ...newList] = list;

// a = 1;  
// b = 2;  
// newList = [3,4,5,6,7,8,9,10];

17. Utilizați atribuirea de destructurare pentru a trece un obiect ca parametri ai unei funcții

Putem crea funcții mai lizibile.

const stats = {  
  max: 56.78,  
  standard_deviation: 4.34,  
  median: 34.54,  
  mode: 23.87,  
  min: -0.75,  
  average: 35.85  
};

// ES5  
function half(stats) {  
  return (stats.max + stats.min) / 2.0;  
};

// ES6 using destructuring  
function half({max, min}) {  
  return (max + min) / 2.0;  
};

console.log(half(stats));   
// 28.015

18. Creați șiruri folosind Literalele șablonului

Literalele șablonului ne ajută să creăm șiruri complexe. Folosesc o sintaxă specială de `` și ${} unde puteți combina textul șablonului cu variabile împreună. De exemplu `Hello, my name is ${myNameVariable} and I love ES6!`

const person = {  
  name: "Zodiac Hasbro",  
  age: 56  
};

// Template literal with multi-line and string interpolation

const greeting = `Hello, my name is ${person.name}!   
I am ${person.age} years old.`;

console.log(greeting);

19. Scrieți declarații literare obiecte concise folosind câmpuri simple

ES6 a adăugat suport pentru definirea cu ușurință a literelor obiectelor.

// returns a new object from passed in parameters  
const createPerson = (name, age, gender) => ({  
  name: name,  
  age: age,   
  gender: gender  
});

console.log(createPerson("Zodiac Hasbro", 56, "male"));

// { name: "Zodiac Hasbro", age: 56, gender: "male" }

20. Scrieți funcții declarative concise cu ES6

Obiectele din JavaScript pot conține funcții.


const ES5_Bicycle = {  
  gear: 2,  
  setGear: function(newGear) {  
    "use strict";  
    this.gear = newGear;  
  }  
};

const ES6_Bicycle = {  
  gear: 2,  
  setGear(newGear) {  
    "use strict";  
    this.gear = newGear;  
  }  
};

ES6_Bicycle.setGear(3);

console.log(ES6Bicycle.gear); // 3

21. Utilizați clasa Sintaxă pentru a defini o funcție de constructor

ES6 oferă sintaxă pentru a crea obiecte folosind class cuvânt cheie:


var ES5_SpaceShuttle = function(targetPlanet){  
  this.targetPlanet = targetPlanet;  
}

class ES6_SpaceShuttle {  
  constructor(targetPlanet){  
    this.targetPlanet = targetPlanet;  
  }  
}

var zeus = new ES6_SpaceShuttle('Jupiter');

console.log(zeus.targetPlanet); // 'Jupiter'

22. Utilizați getters și setere pentru a controla accesul la un obiect

Cu un obiect, doriți adesea să obțineți valori ale proprietăților și să setați o valoare a unei proprietăți în cadrul unui obiect. Acestea sunt numite devine și setatori. Acestea există pentru a ascunde un anumit cod subiacent, deoarece nu ar trebui să fie o preocupare pentru nimeni care folosește clasa.


class Thermostat {  
  // We create Thermostat using temperature in Fahrenheit.  
  constructor(temp) {  
    // _temp is a private variable which is not meant   
    // to be accessed from outside the class.  
    this._temp = 5/9 * (temp - 32);  
  }

// getter for _temp  
  get temperature(){  
    return this._temp;  
  }

// setter for _temp  
  // we can update temperature using Celsius.  
  set temperature(updatedTemp){  
    this._temp = updatedTemp;  
  }  
}

// Create Thermostat using Fahrenheit value  
const thermos = new Thermostat(76);  
let temp = thermos.temperature;

// We can update value using Celsius  
thermos.temperature = 26;  
temp = thermos.temperature;  
console.log(temp) // 26

23. Înțelegeți diferențele dintre import și solicitare

În trecut, am putut folosi doar require pentru a importa funcții și cod din alte fișiere. În ES6 putem folosi import:


// in string_function.js file  
export const capitalizeString = str => str.toUpperCase()

// in index.js file  
import { capitalizeString } from "./string_function"

const cap = capitalizeString("hello!");

console.log(cap); // "HELLO!"

24. Utilizați exportul pentru a reutiliza un bloc de cod

În mod normal export funcții și variabile în anumite fișiere, astfel încât să le puteți importa în alte fișiere – și acum putem reutiliza codul!


const capitalizeString = (string) => {  
  return string.charAt(0).toUpperCase() + string.slice(1);  
}

// Named export  
export { capitalizeString };

// Same line named export  
export const foo = "bar";  
export const bar = "foo";

25. Folosiți * pentru a importa totul dintr-un fișier

Dacă un fișier exportă mai multe lucruri diferite, le puteți importa individual sau le puteți utiliza * pentru a importa totul dintr-un fișier.

Acesta este modul în care ați importa toate variabilele din fișier în exercițiul anterior.


import * as capitalizeStrings from "capitalize_strings";

26. Creați un Export alternativ cu export implicit

Am analizat exporturile denumite în capitolele anterioare și uneori ar putea exista o singură funcție sau o variabilă pe care dorim să o exportăm dintr-un fișier – export default , adesea folosit ca export de rezervă.


// In math_functions.js file

export default function subtract(x,y) {  
  return x - y;  
}

27. Importați un export implicit

Dacă doriți să importațiexport defaultfuncția din exercițiul anterior, așa ați face-o.

Rețineți absența {} in jurul subtract funcţie. Exporturile implicite nu au nevoie de ele.


// In index.js file  
import subtract from "math_functions";

subtract(7,4); // returns 3;

28. JavaScript ES6 Outro

Dacă ați ajuns până aici: felicitări! Majoritatea persoanelor care încep cursurile nu le termină niciodată, așa că poți fi mândru de tine.

Dacă sunteți în căutarea următoarei dvs. provocări, ar trebui să consultați cursul lui Beau Regex aici!

Faceți clic pe imagine pentru a ajunge la curs
Clic aici pentru a ajunge la curs.

Mult noroc! 🙂


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 receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.