Disse JavaScript-metoder vil øge dine færdigheder på få minutter

De fleste af de applikationer, vi bygger i dag, kræver en slags modifikation af dataindsamling. Behandling af genstande i en samling er en almindelig handling, som du sandsynligvis vil støde på. Glem den konventionelle måde at gøre for-loopsom (let i=0; i < value.length; i++) på.

Hurtig heads-up, brug af constin for-loopgiver dig en fejl. Årsagen er, at det skyldes, at det igen erklærer værdien under hver udførelse, og derfor ier ændret af i++. Så når du tænker på enten at bruge consteller let, så spørg dig selv - Vil denne værdi blive deklareret igen? Hvis svaret er ja , gå til let, og hvis nej , gå til const. Mere info.

Lad os sige, at du vil vise listen over produkter og kategorisere, filtrere, søge, ændre eller opdatere en samling. Eller måske vil du udføre hurtige beregninger som sum, multiplikation osv. Hvad er den optimale måde at opnå dette på?

Måske kan du ikke lide pilfunktioner , du vil ikke bruge for meget tid på at lære noget nyt, eller de er bare ikke relevante for dig. Bare rolig, du er ikke alene. Jeg viser dig, hvordan det gøres i ES5 (funktionel deceleration) og ES6 (pilfunktioner).

Vær opmærksom: Pilfunktioner og funktionserklæringer / udtryk er ikke ækvivalente og kan ikke udskiftes blindt. Husk, at thisnøgleordet fungerer forskelligt mellem de to.

De metoder, vi vil se på:

  1. Spred operatør
  2. til ... af iterator
  3. inkluderer ()
  4. nogle()
  5. hver()
  6. filter()
  7. kort()
  8. reducere()
Hvis du vil blive en bedre webudvikler, starte din egen virksomhed, lære andre eller forbedre dine udviklingsevner, sender jeg ugentlige tip og tricks til de nyeste sprog til webudvikling.

1. Spredoperatør

Spread Operator udvider en matrix til dens elementer. Det kan også bruges til objektlitteratur.

Hvorfor skal jeg bruge det?

  • Det er en enkel og hurtig måde at vise elementerne i en matrix på
  • Det fungerer for arrays og objektlitteraturer
  • Det er en hurtig og intuitiv måde at føre argumenter på
  • Det kræver kun tre prikker ...

Eksempel:

Lad os sige, at du vil vise en liste over yndlingsfødevarer uden at oprette en loop-funktion. Brug en spredningsoperator som denne:

2. til ... af iterator

De for...ofstatement loops / gentager gennem indsamling, og giver dig mulighed for at ændre bestemte emner. Det erstatter den konventionelle måde at gøre en for-loop.

Hvorfor skal jeg bruge det?

  • Det er en enkel måde at tilføje eller opdatere et element på
  • At udføre beregninger (sum, multiplikation osv.)
  • Når du bruger betingede udsagn (hvis, mens, skifte osv.)
  • Fører til ren og læsbar kode

Eksempel:

Lad os sige, at du har en værktøjskasse, og at du vil vise alle værktøjerne inde i den. Den for...ofiterator gør det nemt.

3. Inkluderer () metode

Den includes()metode bruges til at kontrollere, om en bestemt streng findes i en samling, og vender tilbage trueeller false. Husk, at det er store og små bogstaver: hvis varen inde i samlingen er SCHOOL, og du søger efter school, vender den tilbage false.

Hvorfor skal jeg bruge det?

  • At oprette enkel søgefunktionalitet
  • Det er en intuitiv tilgang til at afgøre, om der findes en streng
  • Det bruger betingede udsagn til at ændre, filtrere osv
  • Fører til læsbar kode

Eksempel:

Lad os sige af en eller anden grund, at du ikke er opmærksom på, hvilke biler du har i din garage, og du har brug for et system til at kontrollere, om den bil, du ønsker, findes eller ej. includes()til undsætning!

4. Noget () metode

De some()kontrollerer fremgangsmåden, hvis nogle elementer findes i et array, og returneringer trueeller false. Dette svarer noget til konceptet for includes()metoden, undtagen argumentet er en funktion og ikke en streng.

Hvorfor skal jeg bruge det?

  • Det sørger for, at noget element består testen
  • Det udfører betingede udsagn ved hjælp af funktioner
  • Gør din kode erklærende
  • Nogle er gode nok

Eksempel:

Lad os sige, at du er klubbeejer og er ligeglad med, hvem der kommer ind i klubben. Men nogle får ikke adgang, fordi de har drukket for meget (min kreativitet bedst). Tjek forskellene mellem ES5 og ES6 nedenfor:

ES5:

ES6:

5. Hver () metode

De every()metode sløjfer gennem array, kontrol hvervare og returnerer trueeller false. Samme koncept som some(). Bortset fra at hver vare skal opfylde den betingede erklæring, ellers vender den tilbage false.

Hvorfor skal jeg bruge det?

  • Det sørger for, at hvert element består testen
  • Du kan udføre betingede udsagn ved hjælp af funktioner
  • Gør din kode erklærende

Eksempel:

Sidste gang du tillod some()mindreårige studerende at komme ind i klubben, rapporterede nogen om dette, og politiet fangede dig. Denne gang lader du det ikke ske, og du sørger for, at alle overholder aldersgrænsen med every()operatøren.

ES5

ES6

6. Filter () metode

Den filter()fremgangsmåde skaber en ny matrix med alle de elementer, der passerer testen.

Hvorfor skal jeg bruge det?

  • Så du kan undgå at ændre hovedarrayet
  • Det lader dig filtrere emner, du ikke har brug for
  • Giver dig mere læsbar kode

Eksempel:

Lad os sige, at du kun vil returnere priser, der er over eller lig med 30. Filtrer alle andre priser ud ...

ES5

ES6

7. Kort () metode

Den map()metode svarer til den filter()metode, hvad angår returnere en ny array. Den eneste forskel er dog, at den bruges til at ændre varer.

Hvorfor skal jeg bruge det?

  • Det giver dig mulighed for at undgå at foretage ændringer i hovedarrayet
  • Du kan ændre de ønskede emner
  • Giver dig mere læsbar kode

Eksempel:

Lad os sige, at du har en liste over produkter med priser. Din manager har brug for en liste for at vise de nye priser, efter at de er blevet beskattet med 25%. Den map()metode kan hjælpe dig ud.

ES5

ES6

8. Reducer () metode

Den reduce()metode kan anvendes til at transformere et array til noget andet, som kunne være et heltal, en genstand, en kæde af løfter (sekventiel udførelse af løfter) osv Af praktiske grunde vil en simpel brug sag være at opsummere en liste af heltal . Kort sagt, det "reducerer" hele arrayet til en værdi.

Hvorfor skal jeg bruge det?

  • Udfør beregninger
  • Beregn en værdi
  • Tæl dubletter
  • Gruppere objekter efter ejendom
  • Udfør løfter sekventielt
  • Det er en hurtig måde at udføre beregninger på

Eksempel:

Lad os sige, at du vil finde ud af dine samlede udgifter i en uge. Brug reduce()til at få den værdi.

ES5

ES6

Du kan finde mig på Developer News, hvor jeg offentliggør hver uge. Eller du kan følge mig på Twitter, hvor jeg sender relevante tip og tricks til webudvikling.