JavaScript ES6 Features (Polski)

w tym tutorialu dowiesz się o nowych funkcjach w najnowszej wersji JavaScript.

Co to jest ECMAScript 6 (lub ES6)

ECMAScript 2015 (lub ES6) jest szóstym i głównym wydaniem standardu specyfikacji języka ECMAScript. Definiuje standard implementacji JavaScript.

ES6 przyniósł znaczące zmiany w języku JavaScript., Wprowadza kilka nowych funkcji, takich jak zmienne o zasięgu blokowym, nowa pętla do iteracji tablic i obiektów, literały szablonów i wiele innych ulepszeń, aby programowanie JavaScript było łatwiejsze i przyjemniejsze. W tym rozdziale omówimy niektóre z najlepszych funkcji ES6, które można wykorzystać w codziennym kodowaniu JavaScript.

słowo kluczowe let

ES6 wprowadza nowe słowo kluczowelet do deklarowania zmiennych. Przed ES6 jedynym sposobem zadeklarowania zmiennej w JavaScript było słowo kluczowe var., Zobaczmy, jaka jest różnica między nimi.

istnieją dwie krytyczne różnice międzyvar Ilet. Zmienne zadeklarowane za pomocą słowa kluczowego var mają zakres funkcji i są podnoszone u góry w jego zakresie, podczas gdy zmienne zadeklarowane za pomocą słowa kluczowego let mają zakres blokowy ({}) I nie są podnoszone.

zakres blokowy oznacza po prostu, że nowy zakres jest tworzony pomiędzy parą nawiasów klamrowych, tj.{}., Dlatego, jeśli zadeklarujesz zmienną ze słowem kluczowym let wewnątrz pętli, nie istnieje ona poza pętlą, jak pokazano w poniższym przykładzie:

jak widać w powyższym przykładzie zmienna i w pierwszym bloku nie jest dostępna poza pętlą for. Pozwala nam to również na wielokrotne użycie tej samej nazwy zmiennej, ponieważ jej zakres jest ograniczony do bloku ({}), co skutkuje mniejszą deklaracją zmiennych i czystszym kodem.,

słowo kluczowe const

nowe słowo kluczoweconst umożliwia definiowanie stałych. Stałe są tylko do odczytu, nie można przypisać do nich nowych wartości. Są one również blokowane jak let.

const PI = 3.14;console.log(PI); // 3.14PI = 10; // error

jednak nadal możesz zmienić właściwości obiektu lub elementy tablicy:

for…pętli

Nowafor...of pętla pozwala nam bardzo łatwo iterować nad tablicami lub innymi obiektami iteracyjnymi., Ponadto kod wewnątrz pętli jest wykonywany dla każdego elementu obiektu iterowalnego. Oto przykład:

pętla for...of nie działa z obiektami, ponieważ nie można ich iterować. Jeśli chcesz iterować właściwości obiektu, możesz użyć pętli for-in.

literały szablonów

literały szablonów zapewniają łatwy i czysty sposób tworzenia ciągów wielowierszowych i wykonywania interpolacji łańcuchów. Teraz możemy osadzać zmienne lub wyrażenia w łańcuchu w dowolnym miejscu bez żadnych kłopotów.,

literały szablonów są tworzone za pomocą znaku back-tick (` `) (grave accent) zamiast zwykłych podwójnych lub pojedynczych cudzysłowów. Zmienne lub wyrażenia mogą być umieszczone wewnątrz łańcucha przy użyciu składni ${...}. Porównaj poniższe przykłady i zobacz, jak bardzo jest to przydatne:

podczas gdy w ES5, aby osiągnąć to samo, musieliśmy napisać coś takiego:

domyślne wartości parametrów funkcji

teraz w ES6 można określić domyślne wartości parametrów funkcji., Oznacza to, że jeśli nie podano argumentów funkcji podczas jej wywoływania, zostaną użyte domyślne wartości parametrów. Jest to jedna z najbardziej oczekiwanych funkcji w JavaScript. Oto przykład:

podczas gdy w ES5, aby osiągnąć to samo, musieliśmy napisać coś takiego:

funkcje strzałek

funkcje strzałek są kolejną ciekawą funkcją w ES6. Zapewnia bardziej zwięzłą składnię do pisania wyrażeń funkcyjnych, rezygnując ze słów kluczowych function I return.,

funkcje strzałek są definiowane za pomocą nowej składni, strzałki fat (=>). Zobaczmy, jak to wygląda:

Jak widać nie mafunction Ireturn słowa kluczowego w deklaracji funkcji strzałki.

Możesz również pominąć nawiasy, tj.() w przypadku, gdy istnieje dokładnie jeden parametr, ale zawsze będziesz musiał go użyć, gdy masz zero lub więcej niż jeden parametr.,

Dodatkowo, jeśli w ciele funkcji znajduje się więcej niż jedno wyrażenie, należy je zawinąć ({}). W tym przypadku należy również użyć polecenia return, aby zwrócić wartość.

istnieje kilka odmian zapisu funkcji strzałek. Oto najczęściej używane:

istnieje istotna różnica między funkcjami regularnymi a funkcjami strzałek., W przeciwieństwie do normalnej funkcji, funkcja strzałki nie ma własnej this, pobiera this z zewnętrznej funkcji, w której jest zdefiniowana. W JavaScript this jest bieżącym kontekstem wykonywania funkcji.,

aby to zrozumieć, przyjrzyjmy się następującym przykładom:

przepisanie tego samego przykładu przy użyciu literałów szablonów ES6 i funkcji strzałek:

jak widać, słowo kluczowethis w powyższym przykładzie odnosi się do kontekstu funkcji załączającej funkcję strzałki, która jest obiektem Person (linia nr-9), w przeciwieństwie do poprzedniego przykładu, w którym odnosiło się do globalnego okna obiektu (linia nr-9).

klasy

w ECMAScript 5 i wcześniejszych klasy nigdy nie istniały w JavaScript., Klasy są wprowadzane w ES6, który wygląda podobnie do klas w innych obiektowych językach, takich jak Java, PHP, itp., jednak nie działają dokładnie tak samo. Klasy ES6 ułatwiają tworzenie obiektów, implementację dziedziczenia za pomocą słowa kluczowego extends I ponowne użycie kodu.

w ES6 możesz zadeklarować klasę używając nowego słowa kluczowegoclass, po którym następuje nazwa klasy. Zgodnie z konwencją nazwy klas są zapisywane w tytule (tzn. pisane wielką literą każdego słowa).,

w powyższym przykładzie Klasa Square dziedziczy z prostokąt używając słowa kluczowegoextends. Klasy dziedziczone z innych klas są określane jako klasy pochodne lub klasy potomne.

należy również wywołaćsuper() w konstruktorze klasy potomnej przed uzyskaniem dostępu do kontekstu (this)., Na przykład, pominięcie metody super() I wywołanie metody getArea() w obiekcie kwadratowym spowoduje błąd, ponieważ getArea() metoda wymaga dostępu do słowa kluczowego this.

Moduły

przed ES6 nie było natywnej obsługi modułów w JavaScript. Wszystko wewnątrz aplikacji JavaScript, na przykład zmienne w różnych plikach JavaScript, dzieliły ten sam zakres.

ES6 wprowadza moduł oparty na plikach, w którym każdy moduł jest reprezentowany przez osobny plik .js., Teraz możesz użyć instrukcji export lub import w module do eksportowania lub importowania zmiennych, funkcji, klas lub innych elementów do/z innych modułów lub plików.

stwórzmy moduł czyli plik JavaScript „main.js ” i umieść w nim następujący kod:

teraz utwórz kolejny plik JavaScript „aplikacja.js „z następującym kodem:

wreszcie Utwórz plik HTML” test.html ” i z poniższym kodem i otwórz ten plik HTML w przeglądarce za pomocą protokołu HTTP (lub użyj localhost). Zwróć również uwagę na type="module" na znaczniku skryptu.,

parametry Rest

ES6 wprowadza parametry rest, które pozwalają nam przekazać dowolną liczbę parametrów do funkcji w postaci tablicy. Jest to szczególnie pomocne w sytuacjach, gdy chcesz przekazać parametry do funkcji, ale nie masz pojęcia, ile będziesz potrzebować.

parametr rest jest określony przez prefiks nazwanego parametru z operatorem rest (...), tzn. trzy kropki. Parametr Rest może być tylko ostatnim z listy parametrów i może być tylko jeden parametr rest., Spójrz na poniższy przykład, aby zobaczyć, jak to działa:

Gdy parametr rest jest jedynym parametrem w funkcji, pobiera wszystkie argumenty przekazane do funkcji, w przeciwnym razie dostaje resztę argumentów, które przekraczają liczbę nazwanych parametrów.

Operator spreadu

operator spreadu, który jest również oznaczony przez (...), wykonuje dokładnie odwrotną funkcję operatora rest. Operator spread rozkłada (tzn. dzieli) tablicę i przekazuje wartości do podanej funkcji, jak pokazano w poniższym przykładzie:

operator spread może być również użyty do wstawiania elementów tablicy do innej tablicy bez użycia metod tablicy, takich jak push(), unshift() concat() itd.,

przypisanie destrukcji

przypisanie destrukcji jest wyrażeniem, które ułatwia wyodrębnianie wartości z tablic lub właściwości z obiektów do różnych zmiennych, zapewniając krótszą składnię.

istnieją dwa rodzaje destrukcyjnych wyrażeń przyporządkowania—array i object destructing assignment.,zrób to samo w jednym wierszu używając przypisania destrukcji tablicy:

Możesz również użyć operatora rest w przypisaniu destrukcji tablicy, jak pokazano tutaj:

przypisanie destrukcji obiektu

w ES5 aby wyodrębnić wartości właściwości obiektu musimy napisać coś takiego:

ale w ES6, możesz wyodrębnić wartości właściwości obiektu i przypisać je do zmiennych w prosty sposób:

większość funkcji, które omówiliśmy powyżej, jest obsługiwana w najnowsza wersja głównych przeglądarek internetowych, takich jak Google Chrome, Mozilla Firefox, Microsoft Edge, Safari itp.,