Harry James
0 
1272
133
ES6 odnosi się do wersji 6 języka programowania ECMA Script. Skrypt ECMA to znormalizowana nazwa JavaScript. Czym jest JavaScript i czy Internet może istnieć bez niego? Co to jest JavaScript i czy Internet może istnieć bez niego? JavaScript jest jedną z tych rzeczy, które wielu uważa za pewnik. Wszyscy go używają. , a wersja 6 to kolejna wersja po wersji 5, która została wydana w 2011 roku. Jest to znaczące ulepszenie języka JavaScript i dodaje wiele innych funkcji, które mają ułatwić tworzenie oprogramowania na dużą skalę.
ECMAScript, lub ES6, został opublikowany w czerwcu 2015 r. Następnie został przemianowany na ECMAScript 2015. Obsługa pełnej wersji językowej przeglądarki nie jest jeszcze pełna, chociaż obsługiwane są główne części. Główne przeglądarki internetowe obsługują niektóre funkcje ES6. Można jednak używać oprogramowania znanego jako transpiler przekonwertować kod ES6 na ES5, który jest lepiej obsługiwany w większości przeglądarek.
Spójrzmy teraz na kilka głównych zmian, które ES6 wprowadza do JavaScript.
1. Stałe
Wreszcie koncepcja stałych trafiła do JavaScript! Stałe to wartości, które można zdefiniować tylko raz (dla zakresu, zakres wyjaśniony poniżej). Ponowna definicja w tym samym zakresie powoduje błąd.
const JOE = 4.0 JOE = 3.5 // powoduje: Uncaught TypeError: Przypisanie do zmiennej stałej. Możesz użyć stałej wszędzie tam, gdzie możesz użyć zmiennej (var).
console.log („Wartość to:” + Joe * 2) // drukuje: 8 2. Zmienne i funkcje o zasięgu blokowym
Witamy w 21 wieku, JavaScript! W przypadku ES6 zmienne zadeklarowane za pomocą pozwolić (i stałe opisujemy powyżej) przestrzegają zasad określania zakresu bloków, tak jak w Javie, C ++ itp.
Przed tą aktualizacją zmienne w JavaScript miały zasięg działania. To znaczy, kiedy potrzebowałeś nowego zakresu dla zmiennej, musiałeś zadeklarować go w funkcji.
Zmienne zachowują wartość do końca bloku. Po bloku wartość w bloku zewnętrznym (jeśli występuje) jest przywracana.
let x = „cześć”; let x = „world”; console.log („blok wewnętrzny, x =” + x); console.log ("blok zewnętrzny, x =" + x); // wypisuje blok wewnętrzny, x = blok zewnętrzny świata, x = witaj Możesz również przedefiniować stałe w obrębie takich bloków.
let x = „cześć”; const x = 4.0; console.log („blok wewnętrzny, x =” + x); spróbuj x = 3.5 catch (err) console.error („wewnętrzny blok:” + err); x = „świat”; console.log („blok zewnętrzny, x =” + x); // wypisuje blok wewnętrzny, x = 4 blok wewnętrzny: Typ Błąd: Przypisanie do zmiennej stałej. blok zewnętrzny, x = świat 3. Funkcje strzałek
ES6 wprowadza nową składnię do definiowania funkcji za pomocą strzałki. W poniższym przykładzie, x jest funkcją, która akceptuje parametr o nazwie za, i zwraca przyrost:
var x = a => a + 1; x (4) // zwraca 5 Korzystając z tej składni, możesz łatwo definiować i przekazywać argumenty w funkcjach.
Korzystanie z dla każdego():
[1, 2, 3, 4] .forEach (a => console.log (a + "=>" + a * a)) // drukuje 1 => 1 2 => 4 3 => 9 4 => 16 Zdefiniuj funkcje przyjmujące wiele argumentów, umieszczając je w nawiasach:
[22, 98, 3, 44, 67] .sort ((a, b) => a - b) // zwraca [3, 22, 44, 67, 98] 4. Domyślne parametry funkcji
Parametry funkcji można teraz zadeklarować za pomocą wartości domyślnych. W następującym, x jest funkcją z dwoma parametrami za i b. Drugi parametr b ma domyślną wartość 1.
var x = (a, b = 1) => a * b x (2) // zwraca 2 x (2, 2) // zwraca 4 W przeciwieństwie do innych języków, takich jak C ++ lub Python, parametry z wartościami domyślnymi mogą pojawiać się przed tymi bez domyślnych. Zauważ, że ta funkcja jest zdefiniowana jako blok z powrót wartość jako przykład.
var x = (a = 2, b) => return a * b Jednak argumenty są dopasowywane od lewej do prawej. W pierwszym wywołaniu poniżej, b ma niezdefiniowany mimo to wartość za został zadeklarowany z wartością domyślną. Przekazany argument jest dopasowany do za zamiast b. Funkcja powraca NaN.
x (2) // zwraca NaN x (1, 3) // zwraca 3 Gdy wyraźnie przejdziesz niezdefiniowany jako argument używana jest wartość domyślna, jeśli taka istnieje.
x (niezdefiniowany, 3) // zwraca 6 5. Parametry funkcji odpoczynku
Podczas wywoływania funkcji czasami zachodzi potrzeba przekazania dowolnej liczby argumentów i przetworzenia tych argumentów w funkcji. Potrzebę tę zaspokaja parametry funkcji odpoczynku składnia. Zapewnia sposób na przechwycenie pozostałych argumentów po zdefiniowanych argumentach przy użyciu składni pokazanej poniżej. Te dodatkowe argumenty są przechwytywane w tablicy.
var x = funkcja (a, b,… args) console.log („a =” + a + ”, b =„ + b + ”,„ + args.length + „args left”); x (2, 3) // drukuje a = 2, b = 3, 0 argumentów w lewo x (2, 3, 4, 5) // drukuje a = 2, b = 3, 2 argumenty w lewo 6. Templating String
Templating string odnosi się do interpolacji zmiennych i wyrażeń w łańcuchy przy użyciu składni takiej jak perl lub powłoka. Szablon ciągu jest ujęty w znaki cofania („). Natomiast pojedyncze cytaty („) lub podwójne cudzysłowy (“) wskazują normalne ciągi. Wyrażenia wewnątrz szablonu są oznaczone pomiędzy i . Oto przykład:
var name = "joe"; var x = 'hello $ name' // zwraca „hello joe” Oczywiście do oceny można użyć dowolnego wyrażenia.
// zdefiniuj funkcję strzałki var f = a => a * 4 // ustaw wartość parametru var v = 5 // i oceń funkcję w szablonie ciągu var x = 'hello $ f (v)' // zwraca „cześć 20” Ta składnia do definiowania łańcuchów może być również używana do definiowania łańcuchów wieloliniowych.
var x = „hello world next line” // zwraca hello world next line 7. Właściwości obiektu
ES6 wprowadza uproszczoną składnię tworzenia obiektów. Spójrz na poniższy przykład:
var x = „hello world”, y = 25 var a = x, y // jest równoważne z ES5: x: x, y: y Obliczone nazwy właściwości są również całkiem sprytne. W wersji ES5 i wcześniejszych, aby ustawić właściwość obiektu o obliczonej nazwie, trzeba było to zrobić:
var x = „hello world”, y = 25 var a = x: x, y: y a [„joe” + y] = 4 // a jest teraz: x: „hello world”, y: 25 , joe25: 4 Teraz możesz to wszystko zrobić w jednej definicji:
var a = x, y, [„joe” + y]: 4 // zwraca x: „hello world”, y: 25, joe25: 4 Oczywiście, aby zdefiniować metody, wystarczy zdefiniować je za pomocą nazwy:
var a = x, y, ["joe" + y]: 4, foo (v) return v + 4 a.foo (2) // zwraca 6 8. Formalna składnia definicji klasy
Definicja klasy
I wreszcie JavaScript otrzymuje formalną składnię definicji klasy. Chociaż jest to jedynie cukier syntaktyczny w stosunku do już dostępnych klas opartych na protytype, służy on do zwiększenia przejrzystości kodu. To znaczy, że tak nie dodaj nowy model obiektu lub coś podobnego.
klasa Koło konstruktor (promień) this.radius = promień // użyj go var c = nowy Circle (4) // zwraca: Circle promień: 4 Deklarowanie metod
Zdefiniowanie metody jest również dość proste. Nie ma tam niespodzianek.
klasa Circle konstruktor (promień) this.radius = promień computeArea () return Math.PI * this.radius * this.radius var c = nowy Circle (4) c.computeArea () // zwraca: 50.26548245743669 Getters and Setters
Mamy teraz również moduły pobierające i ustawiające, z prostą aktualizacją składni. Przedefiniujmy okrąg klasa z powierzchnia własność.
klasa Koło konstruktor (promień) this.radius = promień get area () return Math.PI * this.radius * this.radius var c = nowy Circle (4) // zwraca: Circle promień: 4 c.area // zwraca: 50.26548245743669 Dodajmy teraz seter. Aby móc zdefiniować promień jako właściwość podlegająca regulacji, powinniśmy przedefiniować rzeczywiste pole na _promień lub coś, co nie będzie kolidowało z rozgrywającym. W przeciwnym razie napotkamy błąd przepełnienia stosu.
Oto nowa definicja klasy:
klasa Circle konstruktor (promień) this._radius = promień get area () return Math.PI * this._radius * this._radius ustaw promień (r) this._radius = r var c = nowy okrąg (4) // zwraca: Koło _radius: 4 c.area // zwraca: 50.26548245743669 c.radius = 6 c.area // zwraca: 113.09733552923255 Podsumowując, jest to miły dodatek do obiektowego JavaScript.
Dziedzictwo
Oprócz definiowania klas za pomocą klasa słowo kluczowe, możesz także użyć rozszerza się słowo kluczowe do dziedziczenia po superklasach. Zobaczmy, jak to działa na przykładzie.
klasa Ellipse konstruktor (szerokość, wysokość) this._width = szerokość; this._height = wysokość; get area () return Math.PI * this._width * this._height; ustaw szerokość (w) this._width = w; ustaw wysokość (h) this._height = h; Klasa Circle rozszerza Ellipse konstruktor (promień) super (promień, promień); ustaw promień (r) super.width = r; super.height = r; // utwórz okrąg var c = nowy Circle (4) // zwraca: Circle _width: 4, _height: 4 c.radius = 2 // c jest teraz: Circle _width: 2, _height: 2 c. obszar // zwraca: 12.566370614359172 c. promień = 5 c. obszar // zwraca: 78.53981633974483 To było krótkie wprowadzenie do niektórych funkcji JavaScript ES6.
Dalej: Skrypty wrażliwej na głos animacji robota Jak skrypty wrażliwej na głos animacji robota w p5.js Jak napisać skrypt wrażliwej na głos animacji robota w p5.js Chcesz zainteresować swoje dzieci programowaniem? Pokaż im ten przewodnik budowania reaktywnej animowanej głowy robota. !
Źródło obrazu: micrologia / Depositphotos