Vaikka ES6 erittely ei ole super-tuoretta, luulen, että monet kehittäjät ovat vielä hypätä tuttu., Suurin syy on todennäköisesti huono tuki verkkoselaimissa heti spesifikaation julkaisun jälkeen. Tällä hetkellä eritelmä on yli 2-vuotias, ja monet nykyaikaiset verkkoselaimet toimivat hyvin ES6: n kanssa. Vaikka sinun (tai asiakkaasi) älä käytä viimeisin versio web-selaimen, voit käyttää transpilers (kuten Babel), joka muuttaa ES6 lähteistä ES5 lähteistä aikana rakentaa prosessi hakemuksen. Se tarkoittaa, että on aika ottaa yksi askel eteenpäin ja oppia ES6.
tässä artikkelissa yritän esitellä mahdollisimman hyödyllisiä ominaisuuksia ytimekkäästi., Opetusohjelman jälkeen sinulla on perustaidot ja voit soveltaa niitä oikeassa projektissa. Älä käsittele sitä oppaana tai dokumentaationa. Tavoitteenani on kannustaa sinua kaivamaan syvemmältä ja tutustumaan ES6: een.
const and let keywords
Constin avulla voit määritellä vakiot (vihdoin!). antaa avulla voit määritellä muuttujia. Sehän on hienoa, mutta eikö Javascriptissä ole jo muuttujia? Kyllä, se on totta, mutta VAR: n ilmoittamilla muuttujilla on funktion laajuus ja ne nostetaan ylös. Se tarkoittaa, että muuttujaa voidaan käyttää ennen sen ilmoittamista., olkoon muuttujilla ja vakioilla lohkoalue (jota ympäröi {}), eikä niitä voida käyttää ennen vakuutusta.
Array helper toiminnot
Uusi viileä auttaja toimintoja ilmestyi, joka helpottaa työtä JS taulukot hyödyllisin tapauksissa. Kuinka monta kertaa olet toteuttanut logiikka kuten: suodatus, tarkistaa, jos jokin tai kaikki elementit täyttävät ehto, tai elementtejä muuntaminen? Luultavasti hyvin usein. Nyt sinulla on hienoja kielellisiä ominaisuuksia tehdä työtä puolestasi., Täällä, mielestäni, ovat kaikkein arvokkaita toimintoja:
forEach
Suorittaa edellyttäen, toiminto kukin alkio, kulkee array elementti argumenttina.
kartta
Luo uuden taulukon, joka sisältää sama määrä elementtejä, mutta lähtö elementit on luotu edellyttäen toiminto. Se vain muuntaa jokaisen array Elementti jotain muuta.,
suodatin
Luo uuden taulukon, joka sisältää osajoukko alkuperäisestä sijainnista. Tulos on nämä elementit, jotka läpäisevät testin toteuttama annettu toiminto, jonka pitäisi palata totta tai väärä.
löytää
Löytää ensimmäinen elementti, joka kulkee testi toteutetaan edellyttäen, toiminto, joka pitäisi palauttaa true tai false.,
jokainen
Tarkistaa, jos jokainen elementti array kulkee testi toteutetaan edellyttäen, toiminto, joka pitäisi palauttaa true tai false.
joitakin
Tarkistaa, jos elementti array kulkee testi toteutetaan edellyttäen, toiminto, joka pitäisi palauttaa true tai false.,
vähentää
Koskee funktio välitetään ensimmäinen parametri vastaan akulla ja jokainen elementti array (vasemmalta oikealle), mikä vähentää sen yhden arvon. Akun alkuarvo olisi ilmoitettava vähennystoiminnon toisena parametrina.
Nuoli toiminnot
Täytäntöönpanon hyvin yksinkertaisia toimintoja (kuten edellä mainittu summa tai tuote) kirjallisesti vaatii paljon boilerplate., Onko siihen parannuskeinoa? Kyllä, kokeile vain nuolitoimintoja!
Nuoli toiminnot voi myös olla inline. Se todella yksinkertaistaa koodi:
Nuoli toiminnot voi myös olla monimutkaisempi ja monta riviä koodia:
Luokat
Joka Java-kehittäjä ei unohda luokkiin, kun siirrytään JS-hanke?, Kuka ei pidä avointa perintö, kuten Java-kielen, kirjoittamisen sijaan magic koodi prototypal perintö? Vaikka jotkut JS-Kehittäjät valittivat, ES6: ssa on otettu käyttöön luokkia. He eivät muuta perinnön käsitettä. Ne ovat vain syntaktista sokeria prototyyppien perintöön.
Parannettu esine literaaleja
Object literaaleja on parannettu., Nyt voimme paljon helpommin:
- määritä kentät muuttujamääritykset sama nimi
- määritä toiminnot
- määritä dynaaminen (laskettu) ominaisuuksia
Mallin jouset
Joka rakastaa kirjoittamista suuri merkkijono ja muuttujat ketjuuntuminen? Uskon vähemmistöä meistä. Kuka inhoaa sen lukemista? Olen varma, että kaikki. Onneksi ES6 esittelee erittäin helppokäyttöisiä merkkijonomalleja, joissa on muuttujien paikkansapitäjät.,
huomaa, että voimme kirjoittaa multi-line teksti.
tärkeää: paketoi teksti heittomerkkien sijaan backstickeilla.
Oletusfunktioargumentit
Etkö halua antaa kaikkia mahdollisia funktioparametreja? Käytä oletusarvoja.
Loput ja levitä toimijat
Levisi
Se mahdollistaa louhinta array tai esinettä sisältöä kuin yhden elementtejä.,
Esimerkki — tee matala kopio array:
Esimerkki — yhdistä taulukot:
Muun
haluatko sitoa muutaman ensimmäisen toiminto parametrit, muuttujat ja muut yhden muuttujat array? Nyt voit tehdä sen melko helposti.,
Tuhoa
array
Mahdollistaa louhinta pyysi elementtejä array ja kohdistamalla niitä muuttujia.
kohde
Mahdollistaa louhinta pyysi ominaisuuksia objekti ja määrittämällä ne muuttujan sama nimi kuin ominaisuuksia.,
Lupaa
Lupaus lupauksia (kyllä, tiedän että se kuulostaa oudolta), että sinulla olisi saada tulevaisuudessa tulokset laskennalliset tai pitkän käynnissä olevat tehtävät. Lupauksella on kaksi kanavaa: ensimmäinen tuloksille, toinen mahdollisille virheille. Saat tuloksen, annat callback funktio ’sitten’ funktio parametri. Virheiden käsittelemiseksi annat takaisinkutsutoiminnon ”catch” – toimintoparametrina.
huomaa, että esimerkin ulostulo voi vaihdella jokaisen suorituksen osalta satunnaisen funktiokutsun vuoksi.,
Tiivistelmä
toivottavasti pidit artikkelin. Jos haluat harjoitusta, voit käyttää hiekkalaatikkoa oppimisprosessissa: https://es6console.com/. Jos tarvitset lisätietoja, löydät sen täältä: