Kas ir ES6 un kas jāzina programmētājiem Javascript

ES6 attiecas uz programmēšanas valodas ECMA Script 6. versiju. ECMA Script ir JavaScript standartizētais nosaukums, un 6. versija ir nākamā versija pēc 5. versijas, kas tika izlaista 2011. gadā. Tas ir būtisks JavaScript valodas uzlabojums un pievieno daudzas citas funkcijas, lai atvieglotu liela mēroga programmatūras izstrādi .

ECMAScript jeb ES6 tika publicēts 2015. gada jūnijā. Pēc tam tas tika pārdēvēts par ECMAScript 2015. Tīmekļa pārlūkprogrammas atbalsts pilnai valodai vēl nav pabeigts, lai gan tiek atbalstītas galvenās daļas. Lielākās tīmekļa pārlūkprogrammas atbalsta dažas ES6 funkcijas. Tomēr ir iespējams izmantot programmatūru, kas pazīstama kā a spēlētājs lai pārvērstu ES6 kodu ES5, kas ir labāk atbalstīts lielākajā daļā pārlūkprogrammu.

Tagad apskatīsim dažas būtiskas izmaiņas, ko ES6 rada JavaScript.

1. Konstantes

Beidzot konstantu jēdziens ir padarījis to par JavaScript! Konstantes ir vērtības, kuras var definēt tikai vienu reizi (katrā diapazonā, tvērumā, kas izskaidrots turpmāk). Atkārtota definīcija tajā pašā darbības jomā izraisa kļūdu.

const JOE = 4.0  
JOE= 3.5  
// results in: Uncaught TypeError: Assignment to constant variable.

Jūs varat izmantot konstanti visur, kur varat izmantot mainīgo ( kur ).

console.log('Value is: ' + joe * 2)  
// prints: 8

2. Bloku darbības jomas mainīgie un funkcijas

Laipni lūdzam 21. gadsimtā, JavaScript! Izmantojot ES6, mainīgie tika deklarēti, izmantojot ļaut (un konstantes aprakstītas iepriekš) ievērojiet bloku darbības jomas noteikumus tāpat kā Java, C ++ uc

Pirms šī atjauninājuma JavaScript mainīgie tika iekļauti funkciju diapazonā. Tas ir, ja jums bija nepieciešama jauna mainīgā darbības joma, jums tas bija jādeklarē funkcijā.

Mainīgie saglabā vērtību līdz bloka beigām. Pēc bloka tiek atjaunota vērtība ārējā blokā (ja tāds ir).

kāpēc netflix nedarbojas manā tālrunī?

{  
 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

Šādos blokos varat arī no jauna definēt konstantes.

{  
 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. Bultas funkcijas

ES6 ievieš bultu funkcijas uz JavaScript. (Tās ir līdzīgas tradicionālajām funkcijām, taču tām ir vienkāršāka sintakse.) Nākamajā piemērā x ir funkcija, kas pieņem parametru ar nosaukumu uz , un atgriež pieaugumu:

var x = a => a + 1;  
x(4) // returns 5

Izmantojot šo sintaksi, jūs varat viegli definēt un nodot argumentus funkcijās.

Izmantojot ar a katram() :

[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))  
// prints  
1 => 1  
2 => 4  
3 => 9  
4 => 16

Definējiet funkcijas, kas pieņem vairākus argumentus, iekļaujot tās iekavās:

[22, 98, 3, 44, 67].sort((a, b) => a - b)  
// returns  
[3, 22, 44, 67, 98]

4. Noklusējuma funkciju parametri

Funkciju parametrus tagad var deklarēt ar noklusējuma vērtībām. Turpmāk, x ir funkcija ar diviem parametriem uz un b . Otrais parametrs b tiek dota noklusējuma vērtība 1 .

var x = (a, b = 1) => a * b  
x(2)  
// returns 2  
x(2, 2)  
// returns 4

Atšķirībā no citām valodām, piemēram, C ++ vai python, parametri ar noklusējuma vērtībām var parādīties pirms tiem, kuriem nav noklusējuma. Ņemiet vērā, ka šī funkcija ir definēta kā bloks ar atgriezties vērtību ilustratīvi.

var x = (a = 2, b) => { return a * b }

Tomēr argumenti tiek saskaņoti no kreisās uz labo. Pirmajā aicinājumā zemāk b ir an nenoteikts vērtība gan uz ir deklarēta ar noklusējuma vērtību. Ievadītais arguments tiek saskaņots ar uz nevis b . Funkcija atgriežas NaN .

x(2)  
// returns NaN  
x(1, 3)  
// returns 3

Kad jūs skaidri ieejat nenoteikts kā argumentu tiek izmantota noklusējuma vērtība, ja tāda ir.

x(undefined, 3)  
// returns 6

5. Atpūtas funkciju parametri

Atsaucoties uz funkciju, dažkārt rodas vajadzība pēc patvaļīga argumentu skaita nodošanas un šo argumentu apstrādes funkcijas ietvaros. Šo vajadzību risina atpūtas funkcijas parametri sintakse. Tas nodrošina veidu, kā pārņemt pārējos argumentus pēc definētajiem argumentiem, izmantojot zemāk redzamo sintaksi. Šie papildu argumenti tiek uztverti masīvā.

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. Stīgu veidne

Virkņu veidne attiecas uz mainīgo un izteiksmju interpolēšanu virknēs, izmantojot sintaksi, piemēram, perl vai čaulu. Virkņu veidne ir ietverta ar atzīmēm atpakaļ `` ). Turpretī vienas pēdiņas ( ' ) vai pēdiņas ( ' ) norāda parastās virknes. Izteiksmes veidnes iekšpusē ir iezīmētas starp $ { un } . Šeit ir piemērs:

var name = 'joe';  
var x = `hello ${name}`  
// returns 'hello joe'

Protams, novērtēšanai varat izmantot patvaļīgu izteiksmi.

// 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'

Šo virkņu definēšanas sintaksi var izmantot arī daudzrindu virkņu definēšanai.

var x = `hello world  
next line`  
// returns  
hello world  
next line

7. Objekta rekvizīti

ES6 piedāvā vienkāršotu objektu izveides sintaksi. Apskatiet tālāk sniegto piemēru.

var x = 'hello world', y = 25  
var a = { x, y }  
// is equivalent to the ES5:  
{x: x, y: y}

Arī aprēķinātie īpašumu nosaukumi ir diezgan jauki. Izmantojot ES5 un vecākas versijas, lai iestatītu objekta rekvizītu ar aprēķinātu nosaukumu, jums bija jādara šādi:

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}

Tagad jūs varat darīt visu vienā definīcijā:

var a = {x, y, ['joe' + y]: 4}  
// returns  
{x: 'hello world', y: 25, joe25: 4}

Un, protams, lai definētu metodes, varat to definēt ar nosaukumu:

var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}  
a.foo(2)  
// returns  
6

8. Formālās klases definīcijas sintakse

Klases definīcija

Visbeidzot, JavaScript iegūst oficiālu klases definīcijas sintaksi. Lai gan tas ir tikai sintaktiskais cukurs salīdzinājumā ar jau pieejamajām prototipu klasēm, tas uzlabo koda skaidrību. Tas nozīmē, ka tas tā ir nē pievienojiet jaunu objekta modeli vai kaut ko līdzīgu.

class Circle {  
 constructor(radius) {  
 this.radius = radius  
 }  
}  
// use it  
var c = new Circle(4)  
// returns: Circle {radius: 4}

Deklarēšanas metodes

Metodes noteikšana ir arī diezgan vienkārša. Tur nav pārsteigumu.

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

Geteri un seteri

Tagad mums ir arī getteri un iestatītāji, vienkārši atjauninot sintaksi. Ļaujiet mums no jauna definēt Aplis klase ar an apgabalā īpašums.

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

Tagad pievienosim seteri. Lai varētu definēt rādiuss kā iestatāms īpašums, mums vajadzētu no jauna definēt faktisko lauku uz _ rādiuss vai kaut kas, kas nav pretrunā ar seteru. Pretējā gadījumā mēs saskaramies ar kaudzes pārpildes kļūdu.

Šeit ir no jauna definēta klase:

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

Kopumā tas ir jauks papildinājums objektorientētam JavaScript.

Mantojums

Papildus klašu definēšanai, izmantojot klase atslēgvārdu, varat izmantot arī pagarina atslēgvārds, ko mantot no super klasēm. Apskatīsim, kā tas darbojas, izmantojot piemēru.

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

Un tas bija īss ievads par dažām JavaScript ES6 funkcijām.

Nākamais: iepazīšanās ar dažas svarīgas JavaScript masīva metodes un skriptu balss jutīgu robotu animāciju! Uzziniet arī par lielisku priekšgala sistēmu Vue.

Attēlu kredīts: micrologia/ Depositphotos

Kopīgot Kopīgot Čivināt E -pasts Canon pret Nikon: kurš kameras zīmols ir labāks?

Canon un Nikon ir divi lielākie nosaukumi kameru nozarē. Bet kurš zīmols piedāvā labāku kameru un objektīvu klāstu?

kā paātrināt internetu tālrunī

Lasīt Tālāk Saistītās tēmas

Programmēšana
JavaScript

Par autoru Džejs Šridhars(Publicēti 17 raksti) Vairāk no Jay Sridhar

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu