JavaScript ES6 tuo uuden syntaksin ja uusia mahtavia ominaisuuksia, jotka tekevät koodistasi modernimman ja luettavamman. Sen avulla voit kirjoittaa vähemmän koodia ja tehdä enemmän. ES6 esittelee meille monia hienoja ominaisuuksia, kuten arrow toiminnot, malli Jouset, luokan tuhoaminen, moduulit … ja enemmän. Katsotaanpa.

const ja päästä

const on uusi avainsana ES6 julistaa muuttujia. const on tehokkaampi kuin var. Kun muuttujaa on käytetty, sitä ei voi siirtää., Toisin sanoen se on muuttumaton muuttuja paitsi silloin, kun sitä käytetään esineiden kanssa.

Tämä on todella hyödyllistä valitsijoiden kohdentamisessa. Esimerkiksi, kun meillä on yksi painike, joka käynnistää tapahtuman, tai, kun haluat valita HTML-elementti JavaScript, käytä const sijaan var. Tämä johtuu siitä, että var on ”nostettu”. Se on aina suositeltavaa käyttää const kun et halua siirtää muuttuja .,

yllä oleva koodi, const eivät muutu, ja ei voida siirtää. Jos yrität antaa sille uuden arvon, se palauttaa sinulle virheen.

let voidaan määritellä uudelleen ja ottaa uusi arvo. Se luo muuttujan.

let on sama kuin const että molemmat ovat tukossa-soveltamisala. Se tarkoittaa, että muuttuja on saatavilla vain sen soveltamisalan puitteissa.,

Nuoli toiminnot

nuoli-toiminto on todella mahtava, ja tekee koodin luettavuutta, enemmän jäsennelty, ja näyttää moderni-koodi. Sen sijaan käyttää tätä:

Käyttö:

Kuten näette, nuoli-toiminto näyttää enemmän luettavissa ja puhdas! Sinun ei tarvitse enää käyttää vanhaa syntaksia.

voit Myös käyttää Nuoli toiminto map, filter ja reduce sisäänrakennettuja toimintoja.,

kartta-toiminto, jossa nuolet näyttää enemmän selkeitä ja helppolukuisia kuin map ES5. ES6: lla voit kirjoittaa lyhyempää ja älykkäämpää koodia. Voit käyttää samaa filter ja reduce.

Template Literals

Template literals or template strings are pretty cool. Meidän ei tarvitse käyttää plus ( + ) – operaattoria merkkijonojen sovittamiseen tai kun haluamme käyttää merkkijonon sisällä olevaa muuttujaa.,

vanha syntaksi:

uusien ES6 syntaksi:

Niin yksinkertainen! Se on todella valtava ero vanhan syntaksin ja ES6. Kun leikkii jouset, kirjaimellinen merkkijono ES6 näyttää enemmän järjestäytynyttä ja hyvin jäsennelty kuin ES5.

oletusarvot

kun työskentelen PHP: ssä, käytän yleensä oletusparametreja. Näiden avulla voit määrittää parametrin etukäteen.,

Joten, kun olet unohtanut kirjoittaa parametrin, se ei palaa määrittelemätön virhe, koska parametri on jo määritelty oletuksena. Joten kun suoritat funktiosi missed-parametrilla, se ottaa oletusarvon parametrin t, eikä se palauta virhettä!

Katso tästä esimerkki:

– toiminnon palauttaa arvon undefined, koska unohdimme antaa se toinen parametri age.,

mutta jos käytimme oletusparametria, se ei palaa määrittelemättömänä, ja se käyttää arvoaan, kun unohdamme määrittää parametrin!

Kuten näette, funktio palauttaa arvon, vaikka meillä jäi toinen parametri. Nyt oletusparametrin avulla voimme käsitellä virheen etukäteen.

Array and object destructing

Destruction tekee matriisin tai objektin arvojen jakamisen uudelle muuttujalle helpommaksi.,

vanha syntaksi:

Kanssa ES6 syntaksi:

ES5 Kanssa, meidän täytyy määrittää kunkin arvo jokaisella muuttujalla. ES6, me vain laittaa arvomme curly suluissa saada mitään omaisuutta objektin.

Huomautus: Jos annat muuttujan, joka ei ole identtinen omaisuuden nimen kanssa, se palaa määrittelemättömänä. Esimerkiksi, jos nimi kiinteistö on name ja me liitä se username muuttuja, se palaa määrittelemätön.,

muuttuja pitää aina nimetä samalla tavalla kuin kiinteistön nimi. Mutta jos haluamme nimetä muuttujan uudelleen, Voimme käyttää kaksoispistettä : sen sijaan.

array, voimme käyttää samaa syntaksia kuin esine. Meidän täytyy vain korvata kihara suluissa hakasulkeet.

Tuonti ja vienti

Käyttäen import ja export oman JavaScript-sovellus tekee siitä entistä tehokkaampi., Niiden avulla voit luoda erillisiä ja uudelleenkäytettäviä komponentteja.

Jos olet perehtynyt JavaScript MVC-kehys, näet, että he käyttävät import ja export käsitellä osia suurimman osan ajasta. Miten ne oikeasti toimivat?

se on yksinkertaista! export mahdollistaa toisessa JavaScript-osassa käytettävän moduulin viennin. Käytämme import tuoda, että moduuli käyttää sitä meidän komponentti.

esimerkiksi meillä on kaksi tiedostoa., Ensimmäinen on nimeltään detailComponent.js ja toinen on nimetty homeComponent.js.

detailComponent.js aiomme viedä detail toiminto.

Ja jos haluamme käyttää tämän toiminnon homeComponent.js, me vain käyttää import.

Jos haluamme tuoda enemmän kuin yksi moduuli, me vain laittaa ne sisällä aaltosulkeita.,

Niin cool, eikö olekin?!

lupaukset

lupaukset ovat ES6: n uusi piirre. Se on tapa kirjoittaa asynkroninen koodi. Sitä voidaan käyttää esimerkiksi silloin, kun haluamme hakea dataa API: sta tai kun meillä on toiminto, joka vie aikaa suorittaa. Lupaukset helpottavat ongelman ratkaisemista, joten luodaan ensimmäinen lupaus!

Jos olet kirjautunut konsoliin, se palaa Lupaus. Joten, jos haluamme suorittaa toiminnon, kun data on noudettu, käytämme lupaus., Lupaus ottaa kaksi parametria: resolve ja reject käsitellä odotettu virhe.

huomaa: noutofunktio palauttaa lupauksen itse!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

Nyt, jos olet kirjautunut konsoliin se palaa joukko tietoja.

Loput parametri ja Levitä toimijan

loput parametrit ovat tottuneet saamaan argumentti array, ja palauttaa uuden taulukon.,

levitä operaattori on sama syntaksi kuin muu parametri, mutta leviäminen operaattori ottaa Array itse eikä vain väitteitä. Voimme käyttää Spread-parametria saadaksemme matriisin arvot sen sijaan, että käyttäisimme A for Loopia tai mitä tahansa muuta menetelmää.

Luokat

Luokat ovat keskeisiä olio-ohjelmointi (OOP). He tekevät koodistasi turvallisemman ja kapseloidun. Luokkien käyttäminen antaa koodillesi mukavan rakenteen ja pitää sen suuntaisena.,

jos Haluat luoda luokan, käytä class avainsana, jota seuraa luokan nimi, jossa on kaksi aaltosulkeita.

Nyt voimme käyttää class menetelmiä ja ominaisuuksia käyttäen new avainsana.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

peri toisen luokan, käytä extends avainsana, jota seuraa luokan nimi haluat peri.,

Voit oppia lisää siitä, Luokat täällä.

ES6: ssa on muitakin uskomattomia ominaisuuksia — voit tutustua niihin täällä.

Johtopäätös

toivon, että olette löytänyt tämän artikkelin hyödyllinen, ja toivon, että minulla oli mahdollisuus esitellä sinulle joitakin ES6 ominaisuuksia. Jos näin on, tilaa tämä postilista saadaksesi lisätietoa etupään aiheista. Kiitos ajastanne.

muuten, olen viime aikoina työskennellyt vahva ryhmä ohjelmistokehittäjiä yksi minun mobiilisovelluksia., Organisaatio oli suuri, ja tuote toimitettiin erittäin nopeasti, paljon nopeammin kuin muut yritykset ja freelancerit, joiden kanssa olen työskennellyt, ja voin rehellisesti suositella niitä muihin hankkeisiin siellä. Ammu minulle sähköpostia, jos haluat ottaa yhteyttä — [email protected].