Home-theater-designers
ES6 nurodo ECMA Script programavimo kalbos 6 versiją. „ECMA Script“ yra standartizuotas „JavaScript“ pavadinimas, o 6 versija yra kita versija po 5 versijos, kuri buvo išleista 2011 m. Tai yra didelis „JavaScript“ kalbos patobulinimas ir prideda daug daugiau funkcijų, skirtų palengvinti didelio masto programinės įrangos kūrimą. .
ECMAScript arba ES6 buvo paskelbtas 2015 m. Birželio mėn. Vėliau jis buvo pervadintas į ECMAScript 2015. Žiniatinklio naršyklės palaikymas visai kalbai dar nėra baigtas, nors pagrindinės dalys yra palaikomos. Pagrindinės žiniatinklio naršyklės palaiko kai kurias ES6 funkcijas. Tačiau galima naudoti programinę įrangą, žinomą kaip žaidėjas konvertuoti ES6 kodą į ES5, kuris yra geriau palaikomas daugelyje naršyklių.
Dabar pažvelkime į kai kuriuos pagrindinius pakeitimus, kuriuos ES6 atneša į „JavaScript“.
1. Konstantos
Pagaliau konstantų sąvoka tapo „JavaScript“! Konstantos yra reikšmės, kurias galima apibrėžti tik vieną kartą (pagal taikymo sritį, apimtį, paaiškinta toliau). Iš naujo apibrėžus tą pačią sritį, atsiranda klaida.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Konstantą galite naudoti visur, kur galite naudoti kintamąjį ( kur ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Bloko apimties kintamieji ir funkcijos
Sveiki atvykę į XXI amžių, „JavaScript“! Naudojant ES6, kintamieji deklaruojami naudojant leisti (ir konstantos aprašytos aukščiau) laikykitės blokų apimties taisyklių, kaip ir „Java“, „C ++“ ir kt. (Jei norite sužinoti daugiau, žr., kaip deklaruoti kintamuosius „JavaScript“.)
Prieš šį naujinimą „JavaScript“ kintamieji buvo apimti funkcijų. Tai yra, kai jums reikėjo naujos kintamojo apimties, turėjote ją deklaruoti funkcijoje.
Kintamieji išlaiko vertę iki bloko pabaigos. Po bloko atkuriama vertė išoriniame bloke (jei yra).
užduočių tvarkyklę išjungė jūsų administratorius „Windows 10“
{
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
Tokiuose blokuose taip pat galite iš naujo apibrėžti konstantas.
{
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. Rodyklių funkcijos
ES6 pristato rodyklių funkcijos į „JavaScript“. (Tai panašios į tradicines funkcijas, tačiau jų sintaksė paprastesnė.) Šiame pavyzdyje x yra funkcija, kuri priima parametrą, vadinamą į ir grąžina jo prieaugį:
var x = a => a + 1;
x(4) // returns 5
Naudodami šią sintaksę, galite lengvai apibrėžti ir perduoti argumentus funkcijose.
Naudojant su a kiekvienam() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Apibrėžkite funkcijas, priimančias kelis argumentus, įtraukdami juos į skliaustus:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Numatytieji funkcijų parametrai
Dabar funkcijų parametrus galima deklaruoti naudojant numatytas vertes. Toliau x yra funkcija su dviem parametrais į ir b . Antrasis parametras b suteikiama numatytoji reikšmė 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Skirtingai nuo kitų kalbų, tokių kaip „C ++“ ar „python“, parametrai su numatytosiomis reikšmėmis gali būti rodomi prieš tuos, kuriuose nėra numatytųjų. Atminkite, kad ši funkcija yra apibrėžta kaip blokas su grįžti vertę kaip iliustraciją.
var x = (a = 2, b) => { return a * b }
Tačiau argumentai derinami iš kairės į dešinę. Pirmame šaukime žemiau b turi an neapibrėžtas nors ir vertė į buvo deklaruota pagal numatytąją vertę. Perduotas argumentas sutampa su į geriau nei b . Funkcija grįžta NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Kai aiškiai įeini neapibrėžtas kaip argumentas naudojama numatytoji vertė, jei tokia yra.
x(undefined, 3)
// returns 6
5. Poilsio funkcijos parametrai
Kai iškviečiama funkcija, kartais iškyla poreikis sugebėti perduoti savavališkai daug argumentų ir apdoroti šiuos argumentus funkcijos viduje. Šį poreikį tvarko poilsio funkcijos parametrai sintaksė. Tai suteikia galimybę užfiksuoti likusius argumentus po apibrėžtų argumentų naudojant toliau pateiktą sintaksę. Šie papildomi argumentai fiksuojami masyve.
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. Styginių šablonas
Eilutės šablonas reiškia kintamųjų ir išraiškų interpoliavimą į eilutes, naudojant sintaksę, tokią kaip perl arba apvalkalas. Eilutės šablonas yra įtrauktas į atgalinius varnelės simbolius ( `` ). Priešingai, vienos citatos ( ' ) arba dvigubos kabutės ( ' ) nurodo įprastas eilutes. Išraiškos šablono viduje pažymėtos tarp {$ ir } . Štai pavyzdys:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Žinoma, vertinimui galite naudoti savavališką išraišką.
// 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'
Ši eilučių apibrėžimo sintaksė taip pat gali būti naudojama apibrėžiant kelių eilučių eilutes.
var x = `hello world
next line`
// returns
hello world
next line
7. Objekto savybės
ES6 pateikia supaprastintą objektų kūrimo sintaksę. Pažvelkite į žemiau pateiktą pavyzdį:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Apskaičiuoti nuosavybės pavadinimai taip pat yra gana madingi. Naudodami ES5 ir ankstesnes versijas, norėdami nustatyti objekto ypatybę apskaičiuotu pavadinimu, turėjote tai padaryti:
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}
Dabar viską galite padaryti vienu apibrėžimu:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
Ir, žinoma, norėdami apibrėžti metodus, galite tiesiog apibrėžti jį pavadinimu:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Formalios klasės apibrėžimo sintaksė
Klasės apibrėžimas
Ir pagaliau „JavaScript“ gauna oficialią klasės apibrėžimo sintaksę. Nors tai tik sintaksinis cukrus, palyginti su jau turimomis prototipų klasėmis, jis padeda pagerinti kodo aiškumą. Tai reiškia, kad tai daro ne pridėti naują objekto modelį ar ką nors panašaus.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Deklaravimo metodai
Apibrėžti metodą taip pat yra gana paprasta. Ten jokių siurprizų.
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
Geteriai ir seteriai
Dabar taip pat turime getterius ir setterius su paprastu sintaksės atnaujinimu. Iš naujo apibrėžkime Apskritimas klasė su srityje nuosavybė.
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
Dabar pridėkime seterį. Kad būtų galima apibrėžti spinduliu kaip nustatomą nuosavybę, turėtume iš naujo apibrėžti tikrąjį lauką į _radijus ar kažkas, kas nesuderins su seteriu. Priešingu atveju susiduriame su kamino perpildymo klaida.
Čia yra iš naujo apibrėžta klasė:
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
Apskritai, tai puikus priedas prie objektinio „JavaScript“.
Paveldėjimas
Be klasių apibrėžimo naudojant klasė raktinį žodį, taip pat galite naudoti tęsiasi raktinį žodį paveldėti iš super klasių. Pažiūrėkime, kaip tai veikia su pavyzdžiu.
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
Ir tai buvo trumpas įvadas į kai kurias „JavaScript ES6“ funkcijas.
Kitas: susipažinimas su keli svarbūs „JavaScript“ masyvo metodai ir scenarijų balsui jautrios robotų animacijos! Taip pat sužinokite apie puikią priekinės sistemos sistemą „Vue“.
Vaizdo kreditas: micrologia/ Depositphotos
Dalintis Dalintis „Tweet“ Paštu „Canon“ prieš „Nikon“: kuris fotoaparato prekės ženklas yra geresnis?„Canon“ ir „Nikon“ yra du didžiausi pavadinimai fotoaparatų pramonėje. Tačiau kuris prekės ženklas siūlo geresnę fotoaparatų ir objektyvų seriją?
kodėl sukčiai nori dovanų kortelių?Skaityti toliau Susijusios temos
- Programavimas
- „JavaScript“
Prenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia