ECMAScript 6 - 10 Niesamowite nowe funkcje
Czy wiesz, że JavaScript (wraz z JScript i ActionScript) jest implementacją specyfikacji języka skryptowego ogólnego przeznaczenia o nazwie ECMAScript? Aby ta paskudna definicja była trochę bardziej atrakcyjna, możemy powiedzieć, że ECMAScript (lub oficjalnie ECMA-262) to standard definiujący sposób korzystania z języka JavaScript i to, co możemy osiągnąć z tym.
Najnowsza, szósta edycja tego języka, ECMAScript 2015 (lub ES6), jest prawdopodobnie najbardziej znaczącą aktualizacją od czasu pierwszej wersji w 1997 r. Głównym celem najnowszej wersji było zapewnienie lepszej obsługi tworzenia większych aplikacji i bibliotek. Oznacza to bardziej dojrzałą składnię, nowe skróty ułatwiające kodowanie, a także nowe metody, słowa kluczowe, typy danych i wiele innych ulepszeń.
Dokumentacja ES6 jest obszerna, jeśli lubisz dużo czytać, możesz pobrać całe specyfikacje ze strony internetowej ECMA International. W tym poście przyjrzymy się 10 starannie dobranym funkcjom, mimo że ES6 ma znacznie więcej do zaoferowania. Jeśli chcesz z nim eksperymentować, ES6 Fiddle jest świetnym miejscem do zrobienia tego, możesz też znaleźć tam fragmenty przykładowego kodu.
Obsługa ECMAScript 6
Dostawcy przeglądarek stopniowo dodawali obsługę funkcji ECMAScript 6. Możesz znaleźć tutaj fajną tabelę kompatybilności dotyczącą obsługi przeglądarki i kompilatora dla nowych funkcji.
Jeśli interesuje Cię obsługa ES6 w Node.js, sprawdź dokumentację tutaj.
Chociaż nie wszystkie funkcje są obecnie obsługiwane, możemy użyć transpilerów, takich jak Babel, do przeniesienia naszego kodu ES6 na ES5. Jest fajna wtyczka Grunt dla Babel, wiele niesamowitych wtyczek ES6 dla Grunt i niesamowita wtyczka Gulp-Babel, więc na szczęście mamy mnóstwo opcji.
W ten sposób możemy zacząć korzystać z ulepszonej składni i możliwości, podczas gdy nie musimy martwić się o problemy z kompatybilnością. Teraz zobaczmy funkcje.
1. Nowy pozwolić Słowo kluczowe
ES6 wprowadza nowe pozwolić słowo kluczowe, które pozwala deklarować zmienne lokalne w zakresie bloku, takie jak instrukcja, wyrażenie lub funkcja (n wewnętrzna). Na przykład możemy zadeklarować a dla pętla w następujący sposób, a następnie ponownie użyj tej samej nazwy zmiennej (ponieważ jej zakres jest ograniczony do dla pętla) wewnątrz następnego Jeśli komunikat:
dla (niech i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Używamy ponownie "i" niech i = x * y
Używając pozwolić słowo kluczowe prowadzi do czystszego i bardziej użytecznego kodu. Różnica pomiędzy pozwolić i var znajduje się w zakresie, na przykład zmiennej lokalnej zdefiniowanej przez var słowo kluczowe może być użyte w całej funkcji obejmującej, podczas gdy zmienne zdefiniowane przez pozwolić działa tylko we własnym (pod) bloku. Pozwolić może być również używany globalnie, w tym przypadku zachowuje się tak samo jak var. Oczywiście w ES6 możemy nadal korzystać var Jeśli chcemy.
2. Nowy const Słowo kluczowe
Nowa const Słowo kluczowe umożliwia zadeklarowanie stałych, znanych również jako zmienne niezmienne, do których nie możemy później przypisać nowej zawartości.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Cichy błąd, ponieważ nie możemy ponownie przypisać nowej wartości do stałej
Zmienne niezmienne nie zawsze są całkowicie niezmienne w ECMAScript 6, jak gdyby stała zawierała obiekt, możemy później zmienić wartość jego właściwości i metod. To samo dotyczy elementów tablicy.
const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22
Nadal nie możemy bezpośrednio przypisać nowej wartości do obiektu MY_CONSTANT w powyższym fragmencie kodu, co oznacza, że nie możemy zmienić nazw właściwości i metod, a także nie możemy dodać nowego lub usunąć istniejącego, więc nie możemy zrobić następująca rzecz:
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // błąd
3. Funkcje strzałek
ECMAScript 6 ułatwia pisanie funkcje anonimowe, ponieważ możemy całkowicie pominąć funkcjonować słowo kluczowe. Musimy tylko użyć nowej składni dla funkcje strzałek, nazwa pochodzi od znaku strzałki => (gruba strzałka), co zapewnia nam wspaniały skrót.
// 1. Jeden parametr w ES6 pozwala sumie = (a, b) => a + b; // w ES5 var sum = function (a, b) return a + b; ; // 2. Bez parametrów w ES6 niech randomNum = () => Math.random (); // w ES5 var randomNum = function () return Math.random (); ; // 3. Bez powrotu w ES6 niech wiadomość = (nazwa) => alert („Cześć” + nazwa + „!”); // w ES5 var message = function (yourName) alert ("Hi" + yourName + "!"); ; Istnieje istotna różnica między funkcjami regularnymi i strzałkowymi, czyli funkcje strzałek nie otrzymują to wartość automatycznie jak funkcje zdefiniowane za pomocą funkcjonować słowo kluczowe zrobić. Funkcje strzałek wiązać leksykalnie to wartość do bieżącego zakresu. Oznacza to, że możemy łatwo ponownie użyć to słowo kluczowe w funkcji wewnętrznej. W ES5 jest to możliwe tylko z następującym hackiem:
// ES5 Hack, aby użyć słowa kluczowego „this” w funkcji wewnętrznej … addAll: function addAll (pieces) var self = this; _.each (elementy, funkcja (sztuka) self.add (sztuka);); ,… // ES6 ta sama wewnętrzna funkcja może teraz używać własnego „this” … addAll: function addAll (pieces) _.each (pieces, piece => this.add (piece)); ,…
Powyższy kod pochodzi z Mozilli Hacks
4. Nowy rozpiętość Operator
Nowa rozpiętość operator jest oznaczony 3 kropkami (…) i możemy go użyć do podpisania miejsca wielu oczekiwanych elementów. Jednym z najczęstszych przypadków użycia operatora rozprzestrzeniania jest wstawienie elementów tablicy do innej tablicy:
let myArray = [1, 2, 3]; let newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
Możemy również wykorzystać dźwignię rozpiętość operator w wywołaniach funkcji, w których chcemy przekazać argumenty z tablicy:
let myArray = [1, 2, 3]; suma funkcji (a, b, c) return a + b + c; console.log (suma (… myArray)); // 6
The rozpiętość operator jest dość elastyczny, ponieważ może być używany wielokrotnie w tej samej tablicy lub wywołaniu funkcji.
5. Wartości domyślne dla parametrów i nowych parametrów odpoczynku
Dobra wiadomość, że w ECMAScript 6 możemy dodać wartości domyślne do parametrów funkcji. Oznacza to, że jeśli nie przekażemy argumentów później w wywołaniu funkcji, zostaną użyte parametry domyślne. W ES5 domyślne wartości parametrów są zawsze ustawione na niezdefiniowany, więc nowa możliwość ustawienia ich na to, co chcemy, jest zdecydowanie doskonałym ulepszeniem języka.
suma funkcji (a = 2, b = 4) return a + b; console.log (sum ()); // 6 console.log (sum (3, 6)); // 9
ES6 wprowadza również nowy rodzaj parametru, the parametry odpoczynku. Wyglądają i działają podobnie do operatorów rozproszonych. Przydają się, jeśli nie wiemy, ile argumentów zostanie przekazanych później w wywołaniu funkcji. Możemy użyć właściwości i metod obiektu Array na parametrach odpoczynku:
funkcja putInAlphabet (… args) let sorted = args.sort (); powrót posortowane; console.log (putInAlphabet („e”, „c”, „m”, „a”, „s”, „c”, „r”, „i”, „p”, „t”)); // a, c, c, e, i, m, p, r, s, t
6. Nowy za… z Komunikat
Z pomocą nowego za… z pętla możemy łatwo iterować po tablicach lub innych obiektach iterowalnych. Wraz z nowym za… z instrukcja, ECMAScript 6 wprowadza również dwa nowe obiekty iterowalne, Mapę dla map klucza / wartości, oraz Zestaw dla kolekcji unikalnych wartości, które mogą być również wartościami pierwotnymi i odwołaniami do obiektów. Kiedy używamy za… z instrukcja, kod wewnątrz bloku jest wykonywany dla każdego elementu iterowalnego obiektu.
let myArray = [1, 2, 3, 4, 5]; niech suma = 0; for (niech i of myArray) sum + = i; console.log (suma); // 15 (= 1 + 2 + 3 + 4 + 5)
7. Literały szablonów
ECMAScript 6 zapewnia nam nową alternatywę dla łączenia łańcuchów. Literały szablonów pozwala nam łatwo tworzyć szablony, w których możemy osadzić różne wartości w dowolnym miejscu. Aby to zrobić, musimy użyć $ … składnia wszędzie tam, gdzie chcemy wstawić dane, które możemy przekazywać ze zmiennych, tablic lub obiektów w następujący sposób:
let customer = title: 'Ms', imię: „Jane”, nazwisko: „Doe”, wiek: „34”; let template = 'Drogi $ customer.title $ customer.firstname $ customer.nazwisko! Szczęśliwe $ customer.age th urodziny! '; console.log (szablon); // Droga Pani Jane Doe! Szczęśliwe 34 urodziny!
8. Klasy
ES6 wprowadza klasy JavaScript oparte na istniejącym dziedziczeniu opartym na prototypach. Nowa składnia sprawia, że łatwiej jest tworzyć obiekty, wykorzystywać dziedziczenie i ponownie używać kodu. Ułatwi to również początkującym przybywającym z innych języków programowania zrozumienie działania JavaScript.
W ES6 klasy są deklarowane jako nowe klasa słowo kluczowe i musi mieć konstruktor() metoda, która jest wywoływana, gdy nowy obiekt jest tworzony przez użycie nowa myClass () składnia. Możliwe jest również rozszerzenie nowych klas za pomocą klasa Dziecko rozszerza Rodzic składnia, która może być znana z innych języków obiektowych, takich jak PHP. Ważne jest również, aby wiedzieć, że w przeciwieństwie do funkcji i deklaracji zmiennych deklaracje klas NIE są podnoszone w ECMAScript 6.
class Polygon constructor (height, width) // konstruktor klasy this.name = 'Polygon'; this.height = height; this.width = width; sayName () // metoda klasy console.log ('Cześć, jestem', ta.nazwa + '.'); niech myPolygon = nowy wielokąt (5, 6); console.log (myPolygon.sayName ()); // Cześć, jestem Wielobokiem. Kod powyżej z przykładów ES6 Fiddle, .
9. Moduły
Czy zastanawiałeś się kiedyś, jak fajnie by było, gdyby JavaScript był modułowy? Oczywiście, aby to zrobić wcześniej, były obejścia takie jak CommonJS (używane w Node.js) lub AMD (Asynchronous Module Definition) (używane w RequireJS), ale ES6 wprowadza moduły jako natywną funkcję.
Musimy zdefiniować każdy moduł we własnym pliku, a następnie użyć eksport słowo kluczowe do eksportowania zmiennych i funkcji do inne pliki i import słowo kluczowe do ich zaimportowania z inne pliki, zgodnie z następującą składnią:
// function.js function cube (a) return a * a * a; function cubeRoot (a) return Math.cbrt (a); export cube, cubeRoot // lub: export kostka jako cb, cubeRoot jako cr // app.js import cube, cubeRoot z 'function'; console.log (cube (4)); // 64 console.log (cubeRoot (125)); // 5
To rozwiązanie jest genialne, ponieważ kod przechowywany w module jest niewidoczny z zewnątrz i musimy wyeksportować tylko część, do której chcemy uzyskać dostęp przez inne pliki. Dzięki modułom ES6 możemy zrobić znacznie więcej niesamowitych rzeczy, tutaj znajdziesz wspaniałe i szczegółowe wyjaśnienie na ich temat.
10. Mnóstwo nowych metod
ECMAScript 6 wprowadza wiele nowych metod dla istniejącego String Prototype, Array Object, Array Prototype i Math Object. Nowe metody mogą znacząco poprawić sposób, w jaki możemy manipulować tymi jednostkami. Mozilla Dev ma świetne przykłady kodu z nowymi dodatkami, warto poświęcić trochę czasu i dokładnie je przeanalizować.
Aby pokazać, jak naprawdę są fajne, oto moja ulubiona: metoda find prototypu Array, która pozwala nam testować pewne kryteria na elementach tablicy, wykonując funkcję callback na każdym elemencie, a następnie zwracając pierwszy element, który zwraca prawdziwe.
funkcja isPrime (element, indeks, tablica) var start = 2; while (start <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12] .find (isPrime)); // niezdefiniowane, nie znaleziono console.log ([4, 5, 8, 12] .find (isPrime)); // 5
Kod powyżej z: Mozilla Dev
