Home-theater-designers
ES6 viittaa ECMA Script -ohjelmointikielen versioon 6. ECMA Script on JavaScriptin vakiomuotoinen nimi, ja versio 6 on seuraava versio vuonna 2011 julkaistun version 5 jälkeen. .
ECMAScript tai ES6 julkaistiin kesäkuussa 2015. Sen nimi muutettiin myöhemmin ECMAScript 2015. Selaimen koko kielen tuki ei ole vielä valmis, vaikka suuria osia tuetaan. Suuret verkkoselaimet tukevat joitain ES6: n ominaisuuksia. On kuitenkin mahdollista käyttää ohjelmistoa, joka tunnetaan nimellä a pelaaja muuntaa ES6 -koodin ES5: ksi, jota useimmat selaimet tukevat paremmin.
Katsotaanpa nyt joitain suuria muutoksia, joita ES6 tuo JavaScriptiin.
1. Vakiot
Lopuksi vakioiden käsite on tehnyt JavaScriptin! Vakiot ovat arvoja, jotka voidaan määritellä vain kerran (laajuuden mukaan, laajuus selitetään alla). Uudelleenmäärittely samassa laajuudessa laukaisee virheen.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Voit käyttää vakioa missä tahansa muuttujaa ( missä ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Block-Scoped Muuttujat ja toiminnot
Tervetuloa 21. vuosisadalle, JavaScript! ES6: ssa muuttujat on ilmoitettu käyttämällä antaa (ja vakioita kuvataan yllä) noudata lohkon laajuussääntöjä aivan kuten Java, C ++ jne. (Lisätietoja on muuttujien ilmoittamisessa JavaScriptissä.)
Ennen tätä päivitystä JavaScriptin muuttujat olivat toiminnallisia. Toisin sanoen, kun tarvitsit uuden muuttujan, sinun oli ilmoitettava se funktion sisällä.
Muuttujat säilyttävät arvon lohkon loppuun asti. Lohkon jälkeen ulomman lohkon (jos sellainen on) arvo palautetaan.
Voiko puhelimeni hakkeroida bluetoothin kautta?
{
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
Voit myös määrittää vakioita uudelleen tällaisten lohkojen sisällä.
{
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. Nuolitoiminnot
ES6 esittelee nuolitoiminnot JavaScriptiin. (Nämä ovat samanlaisia kuin perinteiset toiminnot, mutta niiden syntaksi on yksinkertaisempi.) Seuraavassa esimerkissä x on toiminto, joka hyväksyy parametrin nimeltä kohteeseen , ja palauttaa lisäyksen:
var x = a => a + 1;
x(4) // returns 5
Tämän syntaksin avulla voit määrittää ja välittää argumentteja toiminnoissa helposti.
Käyttäminen a jokaiselle() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Määritä toiminnot, jotka hyväksyvät useita argumentteja, lisäämällä ne sulkeisiin:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Toimintojen oletusparametrit
Toimintoparametrit voidaan nyt ilmoittaa oletusarvoilla. Seuraavassa, x on funktio, jolla on kaksi parametria kohteeseen ja b . Toinen parametri b annetaan oletusarvo 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Toisin kuin muut kielet, kuten C ++ tai python, oletusarvoja sisältävät parametrit voivat näkyä ennen niitä, joilla ei ole oletusarvoa. Huomaa, että tämä toiminto on määritetty lohkoksi, jossa on a palata arvo esimerkkinä.
var x = (a = 2, b) => { return a * b }
Argumentit kuitenkin sovitetaan vasemmalta oikealle. Alla olevassa ensimmäisessä kutsussa b on määrittelemätön arvoa vaikka kohteeseen on ilmoitettu oletusarvolla. Hyväksytty argumentti täsmää kohteeseen mielummin kuin b . Toiminto palaa NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Kun annat nimenomaisesti sisään määrittelemätön Argumenttina käytetään oletusarvoa, jos sellainen on.
x(undefined, 3)
// returns 6
5. Lepotoimintojen parametrit
Funktiota kutsuttaessa syntyy joskus tarve välittää mielivaltainen määrä argumentteja ja käsitellä nämä argumentit funktion sisällä. Tämän tarpeen hoitaa lepofunktion parametrit syntaksi. Se tarjoaa tavan kaapata loput argumentit määritettyjen argumenttien jälkeen käyttämällä alla olevaa syntaksia. Nämä ylimääräiset argumentit tallennetaan taulukkoon.
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. Merkkijonomalli
Merkkijonomallinnuksella tarkoitetaan muuttujien ja lausekkeiden interpolointia merkkijonoiksi käyttämällä syntaksia, kuten perl tai kuori. Merkkijonomalli on sisällytetty jälkikäteen merkkeihin ( `` ). Sitä vastoin yksittäiset lainaukset ( '' ) tai lainausmerkit ( '' ) osoittavat normaaleja merkkijonoja. Mallin sisällä olevat lausekkeet on merkitty väliin $ { ja } . Tässä on esimerkki:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Tietenkin voit käyttää mielivaltaista lauseketta arviointiin.
// 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'
Tätä merkkijonojen määrittämistä koskevaa syntaksia voidaan käyttää myös monirivisten merkkijonojen määrittämiseen.
var x = `hello world
next line`
// returns
hello world
next line
7. Objektin ominaisuudet
ES6 tuo yksinkertaistetun objektin luomisen syntaksin. Katso alla oleva esimerkki:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Myös lasketut kiinteistöjen nimet ovat varsin näppärät. ES5 ja aiemmat versiot, jos haluat asettaa objektiominaisuuden lasketulla nimellä, sinun oli tehtävä tämä:
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}
Nyt voit tehdä kaiken yhdellä määritelmällä:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
Ja tietysti menetelmien määrittämiseksi voit määrittää sen vain nimellä:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Muodollinen luokan määritelmän syntaksi
Luokan määritelmä
Ja lopuksi, JavaScript saa muodollisen luokan määritelmän syntaksin. Vaikka se on vain syntaktista sokeria jo saatavilla olevien prototyyppipohjaisten luokkien yli, se parantaa koodin selkeyttä. Tämä tarkoittaa sitä ei lisää uusi objektimalli tai jotain muuta hienoa.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Ilmoitusmenetelmät
Menetelmän määrittäminen on myös melko yksinkertaista. Ei yllätyksiä siellä.
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
Getterit ja setterit
Meillä on nyt myös getterit ja setterit, joissa on yksinkertainen päivitys syntaksiin. Määritellään uudelleen Ympyrä luokka an alueella omaisuutta.
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
Lisätään nyt setteri. Pystyä määrittelemään säde asetettavana ominaisuutena meidän pitäisi määritellä todellinen kenttä uudelleen _säde tai jotain, joka ei ole ristiriidassa setterin kanssa. Muussa tapauksessa törmäämme pinon ylivuotovirheeseen.
Tässä on uudelleen määritelty luokka:
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
Kaiken kaikkiaan tämä on mukava lisä olio-JavaScriptiin.
Perintö
Sen lisäksi, että määritellään luokat käyttämällä luokka avainsanaa, voit myös käyttää ulottuu superluokilta perittävä avainsana. Katsotaanpa kuinka tämä toimii esimerkin avulla.
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
Ja tämä oli lyhyt johdanto joihinkin JavaScript ES6: n ominaisuuksiin.
Seuraavaksi: tutustuminen muutamia tärkeitä JavaScript -matriisimenetelmiä ja käsikirjoittaen ääniherkän robotti-animaation! Ota myös selvää loistavasta käyttöliittymästä nimeltä Vue.
Kuva: micrologia/ Depositphotos
Jaa Jaa Tweet Sähköposti Canon vs.Nikon: Mikä kameramerkki on parempi?Canon ja Nikon ovat kamerateollisuuden kaksi suurinta nimeä. Mutta mikä merkki tarjoaa paremman valikoiman kameroita ja objektiiveja?
kopioi video verkkosivustoltaLue seuraava Liittyvät aiheet
- Ohjelmointi
- JavaScript
tilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi