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"); // undefinedTemplate 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%
