Home-theater-designers
ES6 odnosi się do wersji 6 języka programowania ECMA Script. ECMA Script to ustandaryzowana nazwa JavaScript , a wersja 6 to kolejna wersja po wersji 5, która została wydana w 2011 roku. Jest to główne ulepszenie języka JavaScript i dodaje wiele innych funkcji mających na celu ułatwienie tworzenia oprogramowania na dużą skalę .
ECMAScript, lub ES6, został opublikowany w czerwcu 2015. Następnie został przemianowany na ECMAScript 2015. Obsługa przeglądarki internetowej dla pełnego języka nie jest jeszcze kompletna, chociaż główne części są obsługiwane. Główne przeglądarki internetowe obsługują niektóre funkcje ES6. Możliwe jest jednak użycie oprogramowania znanego jako gracz do konwersji kodu ES6 na ES5, który jest lepiej obsługiwany przez większość przeglądarek.
Przyjrzyjmy się teraz kilku głównym zmianom, jakie ES6 wprowadza do JavaScriptu.
1. Stałe
Wreszcie koncepcja stałych trafiła do JavaScript! Stałe to wartości, które można zdefiniować tylko raz (na zakres, zakres wyjaśniony poniżej). Ponowna definicja w tym samym zakresie powoduje błąd.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Możesz użyć stałej wszędzie tam, gdzie możesz użyć zmiennej ( gdzie ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Zmienne i funkcje o zasięgu blokowym
Witamy w XXI wieku, JavaScript! W ES6 zmienne zadeklarowane przy użyciu pozwolić (i stałe opisane powyżej) przestrzegają reguł określania zakresu bloków, tak jak w Javie, C++, itp. (Aby dowiedzieć się więcej, zobacz jak deklarować zmienne w JavaScript.)
Przed tą aktualizacją zmienne w JavaScript były objęte zakresem funkcji. To znaczy, gdy potrzebowałeś nowego zakresu dla zmiennej, musiałeś go zadeklarować w funkcji.
Zmienne zachowują wartość do końca bloku. Po bloku przywracana jest wartość w bloku zewnętrznym (jeśli istnieje).
dlaczego moje dane mobilne są tak wolne?
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
Możesz także przedefiniować stałe w takich blokach.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Funkcje strzałek
ES6 wprowadza funkcje strzałek do JavaScript. (Są podobne do tradycyjnych funkcji, ale mają prostszą składnię). W poniższym przykładzie x to funkcja, która przyjmuje parametr o nazwie do i zwraca jego przyrost:
var x = a => a + 1;
x(4) // returns 5
Używając tej składni, możesz z łatwością definiować i przekazywać argumenty w funkcjach.
Korzystanie z dla każdego() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Zdefiniuj funkcje akceptujące wiele argumentów, umieszczając je w nawiasach:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Domyślne parametry funkcji
Parametry funkcji można teraz deklarować z wartościami domyślnymi. W następującym, x to funkcja z dwoma parametrami do oraz b . Drugi parametr b otrzymuje domyślną wartość 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 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 wartości domyślnych. Zauważ, że ta funkcja jest zdefiniowana jako blok z a powrót wartość tytułem ilustracji.
var x = (a = 2, b) => { return a * b }
Jednak argumenty są dopasowywane od lewej do prawej. W pierwszym przywołaniu poniżej b ma i nieokreślony chociaż wartość do został zadeklarowany z wartością domyślną. Przekazywany argument jest dopasowywany do do zamiast b . Funkcja zwraca NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Kiedy wyraźnie mijasz nieokreślony jako argument używana jest wartość domyślna, jeśli istnieje.
x(undefined, 3)
// returns 6
5. Parametry funkcji odpoczynku
Podczas wywoływania funkcji czasami pojawia się potrzeba, aby móc przekazać dowolną liczbę argumentów i przetworzyć te argumenty w funkcji. Ta potrzeba jest obsługiwana przez 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 = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. Szablonowanie ciągów
Szablony łańcuchowe odnoszą 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 back-tick ( `` ). Natomiast pojedyncze cudzysłowy ( ' ) lub cudzysłowy ( ' ) wskazują normalne ciągi. Wyrażenia wewnątrz szablonu są oznaczone między $ { oraz } . Oto przykład:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Oczywiście do oceny można użyć dowolnego wyrażenia.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'
Ta składnia do definiowania ciągów może być również używana do definiowania ciągów wielowierszowych.
var x = `hello world
next line`
// returns
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 }
// is equivalent to the ES5:
{x: x, y: y}
Obliczone nazwy właściwości też są całkiem fajne. W ES5 i wcześniejszych, aby ustawić właściwość obiektu z obliczoną nazwą, trzeba było zrobić to:
var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}
Teraz możesz to wszystko zrobić w jednej definicji:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
I oczywiście, aby zdefiniować metody, możesz po prostu zdefiniować je nazwą:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Formalna składnia definicji klasy
Definicja klasy
I na koniec JavaScript otrzymuje formalną składnię definicji klasy. Chociaż jest to tylko cukier składniowy w stosunku do już dostępnych klas opartych na prototypach, służy do zwiększenia przejrzystości kodu. To znaczy, że to nie nie dodaj nowy model obiektowy lub coś takiego.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Deklarowanie metod
Zdefiniowanie metody jest również dość proste. Żadnych niespodzianek.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
Gettery i setery
Mamy teraz także gettery i settery, z prostą aktualizacją składni. Zdefiniujmy na nowo Koło klasa z an powierzchnia własność.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
Dodajmy teraz setera. Aby móc zdefiniować promień jako właściwość ustawialną, 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 przedefiniowana klasa:
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
Podsumowując, jest to miły dodatek do zorientowanego obiektowo JavaScript.
Dziedzictwo
Oprócz definiowania klas za pomocą klasa słowa kluczowego, możesz również użyć rozciąga się słowo kluczowe do dziedziczenia z superklas. Zobaczmy, jak to działa na przykładzie.
class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
I to było krótkie wprowadzenie do niektórych funkcji JavaScript ES6 .
Dalej: zapoznanie się z kilka ważnych metod tablicowych JavaScript i napisanie skryptu animacji robota czułej na głos ! Dowiedz się również o świetnym frameworku front-end o nazwie Vue .
Źródło obrazu: mikrologia/ Depositphotos
Udział Udział Ćwierkać E-mail Canon kontra Nikon: która marka aparatu jest lepsza?Canon i Nikon to dwie największe marki w branży aparatów fotograficznych. Ale która marka oferuje lepszą gamę aparatów i obiektywów?
jak rozebrać kontroler Xbox One?Czytaj dalej Powiązane tematy
- Programowanie
- JavaScript
Zapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować