Co to jest ES6?

Wróć do Bazy wiedzy

ECMAScript jest to ustandaryzowany przez organizacje ECMA skryptowy język programowania, którego implementacje znajdziemy m.in. w JavaScript. ES6 (oficjalne nazewnictwo wersji – ECMAScript2015) wprowadza wiele zmian, które pozwalają czynić kod jeszcze bardziej wydajnym, czytelniejszym i prostszym w użyciu. Dzięki maksymalnej zgodności z obecnie pisanym kodem nie musimy martwić się o problemy w naszych aplikacjach. Przyjrzyjmy się najciekawszym usprawnieniom oraz funkcjom w ES6 i porównajmy je z poprzednią wersją.

Arrow functions

Do tworzenia funkcji używa się argumentu i symbolu strzałki (bez nawiasów klamrowych).

// ECMAScript 6
odds  = evens.map(v => v + 1)

// ECMAScript 5
odds  = evens.map(function (v) { return v + 1; });

Zmienne const

Tworzy zmienną podobnie do let, której wartość jest stała.

// ECMAScript 6
const PI = 3.141593

// ECMAScript 5
Object.defineProperty(typeof global === "object" ? global : window, "PI", {
    value:        3.141593,
    enumerable:   true,
    writable:     false,
    configurable: false
})

// Wynik console.log(PI++) dla dwóch wersji
"TypeError: Assignment to constant variable."

Zmienna let

Let w przeciwieństwie do var tworzy zmienną dostępną jedynie w danym bloku.

var b = 0; // zmienna globalna "b"
for (let a = 0; a < 10; a++) { // zmienna blokowa "a"
    b += a;
}

console.log((typeof b !== 'undefined') ? b : "undefined"); // 45
console.log((typeof a !== 'undefined') ? a : "undefined"); // undefined

Template string

Pozwala w prosty sposób wstawiać zmienne wewnątrz ciągu znaków oraz rozbijać ciąg na kilka linijek.

var klient = { imie: "Bartek" }
var koszyk = { ilosc: 7, cena: 130.50}

// ECMAScript 6
var wiadomosc = `Witaj ${klient.imie}!
Przed chwila kupiłeś ${koszyk.ilosc} produktów o łącznej kwocie ${koszyk.cena.toFixed(2)}zl.`

// ECMAScript 5
var wiadomosc = "Witaj " + klient.imie + "!\n" +
"Przed chwila kupiles " + koszyk.ilosc + " produktów o łącznej kwocie " + koszyk.cena.toFixed(2) + "zl.";

// Wynik console.log(wiadomosc) dla dwóch wersji
"Witaj Bartek!
Przed chwila kopiłeś 7 produktów o łącznej kwocie 130.50zl."

Generatory

Każdorazowe wywołanie obiektu generatora metodą next().value zwraca wartość następnego yield (podobnie jak return).

// ECMAScript 6
function* robot(imie) {
    yield `Witaj ${imie}!`;
    yield `Witaj ponownie ${imie}!`;
    yield `Do zobaczenia!`;
}
var proces = robot("Bartek");
for (let wartosc of proces) {
    console.log(wartosc);
}

// ECMAScript 5
function robot(imie, odpowiedz) {
    switch (odpowiedz) {
        case 0: return "Witaj " + imie + "!";
        case 1: return "Witaj ponownie " + imie + "!";
        case 2: return "Do zobaczenia!";
    }
}
for (var i = 0; i < 3; i++) {
    console.log(robot("Bartek", i));
}

// Wynik console.log() dla dwóch wersji
"Witaj Bartek!"
"Witaj ponownie Bartek!"
"Do zobaczenia!"

Kompatybilność z przeglądarkami

Wierząc opublikowanym danym na stronie kangax.github.io (z dnia 03.03.2017) zamieszczam krótkie podsumowanie z kompatybilności przeglądarek względem nowej wersji języka ECMAScript 6.

Desktop: Edge (v14) 93%, Firefox (v51) 94%, Chrome/Opera 97%, Safari (v10) 100%
Mobile: Android (5.1) 25%, iOS 9 54%, iOS 10 100%

Skontaktuj się z nami

Przejdź do formularza wyceny on-line aby skrócić do minimum czas na przygotowanie wyceny realizacji.