Selv om ES6 specifikation ikke er super-frisk, jeg tror, at mange udviklere er stadig ikke til at hoppe fortrolig med det., Den væsentligste årsag er sandsynligvis dårlig støtte i browebbro .sere lige efter specifikation frigivelse. I øjeblikket er specifikationen over 2 år gammel, og mange moderne browebbro .sere fungerer godt med ES6. Selv hvis du (eller dine kunder) ikke bruger den seneste version af web-browser, du kan bruge transpilers (som Babel), som forvandler ES6 kilder til ES5 kilder under byggeprocessen af ansøgningen. Det betyder, at det er på tide at gøre et skridt fremad og lære ES6.
i denne artikel vil jeg forsøge at introducere de mest nyttige funktioner på en kortfattet måde., Efter selvstudiet vil du have grundlæggende færdigheder og være i stand til at anvende dem i et rigtigt projekt. Behandl det ikke som en vejledning eller dokumentation. Mit mål er at opfordre dig til at grave dybere og blive fortrolig med ES6.
const og lad søgeord
const giver dig mulighed for at definere konstanter (endelig!). lad gør det muligt at definere variabler. Det er godt, men har vi ikke allerede variabler i JavaScript? Ja, det er sandt, men variabler, der er erklæret af var, har funktionsomfang og hejses til toppen. Det betyder, at en variabel kan bruges, før den er blevet erklæret., lad variabler og konstanter har blok omfang (omgivet af {}) og kan ikke bruges før erklæringen.
Array hjælper funktioner
Nye smarte funktioner hjælper dukkede op, som letter arbejdet med JS arrays i de fleste nyttige sager. Hvor mange gange har du gennemføre logik som: filtrering, kontrollere, om nogen eller alle elementer opfylder betingelsen, eller elementer konvertering? Sandsynligvis meget ofte. Nu har du gode sprogfunktioner til at gøre arbejdet for dig., Her er efter min mening de mest værdifulde funktioner:
forEach
udfører den medfølgende funktion for hvert element i arrayet og passerer arrayelementet som et argument.
kort
Opretter et nyt array, der indeholder det samme antal elementer, men output-elementer, der er skabt af den medfølgende funktion. Det bare konverterer hvert array element til noget andet.,
filter
Opretter et nyt array, der indeholder en delmængde af det oprindelige array. Resultatet har disse elementer, der består testen implementeret af den angivne funktion, som skal returnere sandt eller falsk.
find
Finder det første element, som passerer de test, der gennemføres som forudsat funktion, der skal returnere sand eller falsk.,
alle
Kontrol, hvis hvert element i arrayet består prøven gennemføres som forudsat funktion, der skal returnere sand eller falsk.
nogle
kontrollerer, om et element i arrayet består testen implementeret af den angivne funktion, som skal returnere true eller false.,
reducere
Anvender en funktion, der passerede som den første parameter, mod en akkumulator, og hvert element i array (fra venstre til højre), således at reducere det til en enkelt værdi. Den oprindelige værdi af akkumulatoren skal tilvejebringes som den anden parameter for reduktionsfunktionen.
Pil funktioner
Gennemførelsen af meget simple funktioner (som ovennævnte sum eller produkt), der kræver at skrive en masse af standardtekst., Er der noget middel til det? Ja, bare prøv pil funktioner!
og Pil-funktioner kan også være indbygget. Det er virkelig forenkler kode:
og Pil-funktioner kan også være mere kompleks og har mange linjer kode:
Klasser
Som Java-udvikler ikke gå glip af klasser, når de skifter til en JS projekt?, Hvem kan ikke lide eksplicit arv, som på Java-sprog, i stedet for at skrive magisk kode til prototypisk arv? Selvom nogle JS-udviklere klagede, er klasser blevet introduceret i ES6. De ændrer ikke begrebet arv. De er bare syntaktisk sukker til prototypisk arv.
Øget objekt konstanter
Objekt konstanter er blevet forbedret., Nu kan vi meget mere nemt:
- angiv felter med variabel tildeling af samme navn
- angiv funktioner
- angiv dynamisk (beregnet) egenskaber
Skabelon strenge
Der elsker at skrive store streng og variabler, der sammenk? Jeg tror et mindretal af os. Hvem hader at læse det? Jeg er sikker på alle. Heldigvis introducerer ES6 meget brugervenlige strengskabeloner med pladsholdere til variabler.,
Bemærk venligst, at vi kan skrive multi-line tekst.
VIGTIGT: Brug backticks i stedet for apostrofer til at pakke teksten.
standard funktion argumenter
kan du ikke lide at give alle mulige funktionsparametre? Brug standardindstillinger.
og Resten spredt operatører
Spredt
det gør Det muligt for udvinding af array-objekt eller indhold, som enkelte elementer.,
Eksempel — gør overfladisk kopi af array ‘ et:
Eksempel — flet arrays:
Resten
Vil du gerne til at binde de første par funktion parametre til variabler, og andre, at enkelte variabler som en matrix? Nu kan du gøre det ganske let.,
Destruktureringsdeklaration
array
Gør det muligt for udvinding af de ønskede elementer fra rækken, og tildele dem til variable.
For objektet
Gør det muligt for udvinding af de ønskede egenskaber fra objektet, og tildele dem til variabler af samme navn som egenskaber.,
Løfter
Lover lover (ja, jeg ved det lyder underligt), som du vil få i fremtiden resultaterne af udskudt eller langvarige opgaver. Promise har to kanaler: den første til resultater, den anden for potentielle fejl. For at få resultatet giver du tilbagekaldsfunktionen som funktionsparameter’ derefter’. For at håndtere fejl angiver du tilbagekaldsfunktionen som’ catch ‘ – funktionsparameteren.
bemærk, at output af eksemplet kan variere for hver udførelse, på grund af tilfældig funktion opkald.,
Oversigt
jeg håber, du har nydt denne artikel. Hvis du vil have lidt øvelse, kan du bruge sandkassen til læringsprocessen: https://es6console.com/. Hvis du har brug for mere information, kan du finde den her: