Sep 15, 2017 · 4 min lese

selv Om ES6 spesifikasjonen er ikke super-frisk, tror jeg at mange utviklere er fortsatt ikke å hoppe kjent med det., Den viktigste grunnen er trolig dårlig støtte i nettlesere like etter spesifikasjon utgivelsen. I dag, den spesifikasjonen som er over 2 år gammel, og mye av moderne nettlesere fungerer godt med ES6. Selv om du (eller dine kunder) ikke bruker den nyeste versjonen av nettleseren, kan du bruke transpilers (som Babel), som forvandler ES6 kilder til ES5 kilder under byggeprosessen av programmet. Det betyr at det er på tide å ta et skritt frem og lære ES6.

I denne artikkelen, jeg vil prøve å introdusere de mest nyttige funksjonene i en konsis måte., Etter opplæringen, vil du ha grunnleggende ferdigheter og være i stand til å anvende dem i et reelt prosjekt. Ikke behandle det som en guide eller dokumentasjon. Mitt mål er å oppmuntre deg til å grave dypere og bli kjent med ES6.

const og la søkeord

const lar deg definere konstanter (endelig!). la gjør deg i stand til å definere variabler. Det er flott, men ikke vi har variabler i JavaScript allerede? Ja, det er sant, men variabler deklareres ved var har funksjon omfang og er heist til toppen. Det betyr at en variabel kan brukes før det har blitt erklært., la variabler og konstanter har blokkere omfang (omgitt av {}), og kan ikke brukes før erklæringen.

Array helper funksjoner

Nye kule helper funksjoner dukket opp, som letter arbeidet med JS-matriser i mest nyttige saker. Hvor mange ganger har du implementere logikk som: filtrering, for å se om noen eller alle elementer møte tilstand, eller elementer konvertering? Sannsynligvis veldig ofte. Nå har du en flott språk har å gjøre jobben for deg., Her, i min mening, er den mest verdifulle funksjoner:

forEach

Utfører gitt funksjon for hvert element i matrisen, passerer array, element, som et argument.

kart

Oppretter en ny matrise som inneholder samme antall elementer, men utgang elementer er laget av, forutsatt funksjon. Det bare konverterer hver matrise-elementet til noe annet.,

filtrer

Oppretter en ny matrise som inneholder et delsett av den opprinnelige matrisen. Resultatet har disse elementene som passerer testen gjennomført av gitt funksjon, som skal returnere true eller false.

søk

Finner det første elementet som passerer testen gjennomført av gitt funksjon, som skal returnere true eller false.,

alle

Sjekker om hvert element i matrisen passerer testen gjennomført av gitt funksjon, som skal returnere true eller false.

noen

Sjekker om noen element i matrisen passerer testen gjennomført av gitt funksjon, som skal returnere true eller false.,

redusere

Gjelder en funksjon gått som den første parameteren mot en akkumulator og hvert element i matrisen (fra venstre til høyre), og dermed redusere det til en enkelt verdi. Den første verdien av akkumulatoren bør gis som andre parameter for å redusere funksjonen.

Pil funksjoner

Implementering av svært enkle funksjoner (som den nevnte summen eller produkt) krever skriftlig mye av standardteksten., Er det noen rette for det? Ja, bare prøv pil funksjoner!

Pil funksjoner kan også være inline. Det er virkelig forenkler koden:

Pil funksjoner kan også være mer komplekse og har mange linjer med kode:

Klasser

Som Java-utvikler ikke gå glipp av klasser når du bytter til en JS-prosjektet?, Hvem liker ikke eksplisitt arv, som i Java-språket, i stedet for å skrive magiske koden for prototypal arv? Selv om noen JS utviklerne klaget, klasser har blitt innført i ES6. De trenger ikke endre konseptet av arv. De er bare syntaktisk sukker for prototypal arv.

Forbedret objekt verdiane

Objekt verdiane har blitt forbedret., Nå kan vi mye lettere:

  • definere felt med variabel tildeling av samme navn
  • definere funksjoner
  • definere dynamiske (beregnet) egenskaper

Mal strenger

Som elsker å skrive stor streng og variabler sammensetting? Jeg tror at et mindretall av oss. Som hater å lese den? Jeg er sikker på at alle og enhver. Heldigvis, ES6 introduserer veldig lett-å-bruke string maler med plassholdere for variabler.,

Vær oppmerksom på, at vi kan skrive multi-line tekst.

Viktig: Bruk backticks i stedet for apostrofer å bryte teksten.

Standard funksjon argumenter

liker du ikke å gi alle mulige funksjon parametere? Bruk standarder.

Hvil og spre operatører

Spredt

Det muliggjør utvinning av matrise eller objekt innhold som enkeltstående elementer.,

Eksempel — gjøre grunn kopi av utvalg:

Eksempel — flett » – matriser:

Resten

ønsker du å binde de første par funksjon parametere, variabler, og andre til å enkelt variabler som en matrise? Nå kan du gjøre det ganske enkelt.,

Destructuring

Av array

Muliggjør utvinning av forespurte elementene fra tabellen og tilordne dem til variabler.

Av objektet

Muliggjør utvinning av etterspurte egenskaper fra objektet, og tilordne dem til variabler med samme navn som egenskaper.,

Løfter

Lover lover (ja, jeg vet det høres merkelig) at du ville komme i fremtiden resultater av utsatt eller langvarige oppgaver. Løftet har to kanaler: det første for resultatene, det andre for mulige feil. For å få det resultatet du gi tilbakering funksjon som ‘så’ – funksjonen parameter. For å håndtere feil, du gir tilbakering funksjon som ‘fange’ – funksjonen parameter.

Vennligst legg merke til at produksjonen av for eksempel kan variere for hver kjøring, på grunn av random-funksjon samtale.,

Oppsummering

jeg håper du likte artikkelen. Hvis du vil ha litt praksis, kan du bruke sandkassen for læringsprosessen: https://es6console.com/. Hvis du trenger mer informasjon, kan du finne det her: