Home-theater-designers
Az ES6 az ECMA Script programozási nyelv 6. verziójára utal. Az ECMA Script a JavaScript szabványosított neve, és a 6-os verzió a következő verzió a 2011-ben megjelent 5-ös verzió után. Ez a JavaScript nyelv jelentős fejlesztése, és számos további funkcióval rendelkezik, amelyek megkönnyítik a nagyszabású szoftverfejlesztést .
Az ECMAScript vagy az ES6 2015 júniusában jelent meg. Ezt követően átnevezték ECMAScript 2015. -re. A teljes nyelvű webböngésző -támogatás még nem fejeződött be, bár a nagyobb részek támogatottak. A főbb böngészők támogatják az ES6 néhány funkcióját. Lehetőség van azonban a játékos konvertálni az ES6 kódot ES5 -re, amelyet a legtöbb böngésző jobban támogat.
Nézzünk most néhány jelentős változást, amelyeket az ES6 hoz a JavaScripthez.
1. Állandó
Végül az állandók fogalma elérte a JavaScriptet! Az állandók olyan értékek, amelyeket csak egyszer lehet meghatározni (hatókörönként, hatókörönként alább). Az ugyanazon hatókörön belüli újradefiniálás hibát okoz.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
A konstansot bárhol használhatja, ahol használhat változót ( ahol ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Blokkolt hatókörű változók és függvények
Üdvözöljük a 21. században, JavaScript! ES6 esetén a változók használatával deklarálták hagyja (és az állandókat a fentiekben leírtuk) kövesse a blokk -hatókör szabályait, mint a Java, a C ++ stb.
A frissítés előtt a JavaScript változóinak funkciói kiterjedtek. Vagyis, amikor új hatókörre volt szüksége egy változóhoz, akkor azt egy függvényen belül deklarálnia kellett.
A változók a blokk végéig megőrzik az értéket. A blokk után a külső blokkban lévő érték (ha van) visszaáll.
Hogyan törölhetem a Google keresési előzményeit?
{
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
Az ilyen blokkokon belül az állandókat is újradefiniálhatja.
{
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. Nyíl funkciók
Az ES6 bemutatja nyíl funkciókat a JavaScripthez. (Ezek hasonlóak a hagyományos függvényekhez, de egyszerűbb szintaxissal rendelkeznek.) A következő példában x egy olyan függvény, amely elfogadja az úgynevezett paramétert nak nek , és visszatér a növekményéhez:
var x = a => a + 1;
x(4) // returns 5
Ezzel a szintaxissal könnyen definiálhat és adhat át érveket a függvényekben.
Használata a az egyes() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Határozza meg a több argumentumot elfogadó függvényeket zárójelbe zárva:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Alapértelmezett funkcióparaméterek
A funkcióparaméterek mostantól deklarálhatók alapértelmezett értékekkel. A következőkben, x két paraméterű függvény nak nek és b . A második paraméter b alapértelmezett értéke 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Más nyelvekkel ellentétben, mint például a C ++ vagy a python, az alapértelmezett értékekkel rendelkező paraméterek megjelenhetnek az alapértelmezett értékek előtt. Ne feledje, hogy ezt a funkciót blokkként definiálja a Visszatérés értékét szemléltetésképpen.
var x = (a = 2, b) => { return a * b }
Az érvek azonban balról jobbra illeszkednek. Az alábbi első felhívásban b van egy határozatlan értéke annak ellenére nak nek alapértelmezett értékkel lett deklarálva. Az átadott érv párosítva van nak nek inkább mint b . A függvény visszatér NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Amikor kifejezetten belépsz határozatlan argumentumként az alapértelmezett értéket kell használni, ha van ilyen.
x(undefined, 3)
// returns 6
5. Pihenési funkció paraméterei
Egy függvény meghívásakor néha felmerül az igény, hogy tetszőleges számú argumentumot át lehessen adni, és ezeket az argumentumokat a függvényen belül fel kell dolgozni. Ezt az igényt a nyugalmi függvény paraméterei szintaxis. Lehetővé teszi a többi argumentum rögzítését a meghatározott argumentumok után az alább látható szintaxis segítségével. Ezeket az extra érveket tömb rögzíti.
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. String sablon
A karakterlánc -sablonozás a változók és kifejezések karakterláncokba való interpolálására utal, olyan szintaxis használatával, mint a perl vagy a shell. A karakterlánc-sablon hátsó jelzésű karakterekbe van foglalva ( `` ). Ezzel szemben egyetlen idézet ( ' ) vagy idézőjelek ( ' ) jelzi a normál karakterláncokat. A sablonon belüli kifejezések között vannak jelölve $ { és } . Íme egy példa:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Természetesen tetszőleges kifejezést használhat az értékeléshez.
// 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'
Ez a szintaxis a karakterláncok meghatározására többsoros karakterláncok meghatározására is használható.
var x = `hello world
next line`
// returns
hello world
next line
7. Objektum tulajdonságai
Az ES6 egyszerűsített objektum -létrehozási szintaxist hoz. Nézze meg az alábbi példát:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
A számított ingatlannevek is nagyon ügyesek. Az ES5 és korábbi verziói esetén az objektumtulajdonság számított névvel történő beállításához a következőket kell tennie:
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}
Most mindezt egyetlen definícióban teheti meg:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
És természetesen a módszerek meghatározásához csak a névvel határozhatja meg:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Formális osztálydefiníció szintaxisa
Osztálydefiníció
És végül a JavaScript formális osztálydefiníciós szintaxist kap. Jóllehet csupán szintaktikai cukor a már rendelkezésre álló prototípus-alapú osztályokhoz képest, a kód egyértelműségének javítását szolgálja. Ez azt jelenti, hogy igen nem adjon hozzá új objektummodellt vagy bármi ilyesmit.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Deklarációs módszerek
A módszer meghatározása is meglehetősen egyszerű. Ott nincs meglepetés.
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
Getters és Setters
Most már van getter és setter is, a szintaxis egyszerű frissítésével. Fogalmazzuk újra a Kör osztály egy terület ingatlan.
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
Most adjunk hozzá egy szettet. Hogy definiálni tudja sugár beállítható tulajdonságként újra kell definiálnunk a tényleges mezőt _sugár vagy valami, ami nem ütközik a szetterrel. Ellenkező esetben verem túlcsordulási hibával találkozunk.
Íme az újra definiált osztály:
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
Mindent összevetve ez egy szép kiegészítés az objektum-orientált JavaScripthez.
Öröklés
Az osztályok definiálása mellett a osztály kulcsszót is használhatja kiterjed kulcsszó, amelyet örökölni kell a szuper osztályoktól. Nézzük meg, hogyan működik ez egy példával.
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
És ez egy rövid bevezető volt a JavaScript ES6 néhány funkciójához.
Következő: ismerkedés néhány fontos JavaScript tömb módszer és hangérzékeny robot animáció forgatókönyve! Ismerje meg a Vue nevű nagyszerű front-end keretrendszert is.
Kép jóváírása: micrologia/ Depositphotos
Részvény Részvény Csipog Email Canon vs Nikon: Melyik a jobb márka?A Canon és a Nikon a két legnagyobb név a kameraiparban. De melyik márka kínálja a kamerák és objektívek jobb választékát?
hogyan lehet privát fotókat készíteni a Facebookon 2018Olvassa tovább Kapcsolódó témák
- Programozás
- JavaScript
Iratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide