Sådan kan du udnytte JavaScript-arrays bedre

Foto af Ben White på Unsplash

Hurtig læse, jeg lover. I løbet af de sidste par måneder bemærkede jeg, at de nøjagtigt samme fire fejl stadig vendte tilbage gennem de anmodninger om træk, jeg kontrollerede. Jeg udgiver også denne artikel, fordi jeg selv har begået alle disse fejl! Lad os gennemse dem for at sikre, at vi bruger Array-metoder korrekt!

Udskiftning af Array.indexOf med Array.includes

”Hvis du leder efter noget i dit array, skal du bruge Array.indexOf.” Jeg kan huske at have læst en sætning som denne på mit kursus, da jeg lærte JavaScript. Setningen er helt sand, uden tvivl!

Array.indexOf “returnerer det første indeks, hvor et givet element kan findes,” siger MDN-dokumentationen. Så hvis vi bruger det returnerede indeks senere i vores kode, og Array.indexOf er løsningen.

Men hvad hvis vi kun behøver at vide, om vores array indeholder en værdi eller ej? Virker som et ja / nej spørgsmål, et boolskt spørgsmål vil jeg sige. I dette tilfælde anbefaler jeg at bruge Array.include, der returnerer en boolsk.

Brug af Array.find i stedet for Array.filter

Array.filter er en meget nyttig metode. Det opretter en ny matrix fra en anden med alle elementer, der passerer tilbagekaldsargumentet. Som angivet med dens navn, skal vi bruge denne metode til filtrering og til at få en kortere matrix.

Men hvis vi ved, at vores tilbagekaldsfunktion kun kan returnere et element, vil jeg ikke anbefale det - for eksempel når du bruger et tilbagekaldsargument, der filtrerer gennem et unikt ID. I dette tilfælde returnerer Array.filter en ny matrix, der kun indeholder et element. Ved at lede efter et specifikt ID kan vores intention være at bruge den eneste værdi indeholdt i matrixen, hvilket gør denne matrix ubrugelig.

Lad os tale om forestillingen. For at returnere alle elementer, der matcher tilbagekaldsfunktionen, skal Array.filter gennemse hele arrayet. Lad os endvidere forestille os, at vi har hundreder af varer, der tilfredsstiller vores tilbagekaldsargument. Vores filtrerede matrix ville være temmelig stort.

For at undgå disse situationer anbefaler jeg Array.find. Det kræver et tilbagekaldsargument som Array.filter, og det returnerer værdien af ​​det første element, der tilfredsstiller dette tilbagekald. Desuden stopper Array.find, så snart et element tilfredsstiller tilbagekaldet. Det er ikke nødvendigt at gennemse hele arrayet. Ved at bruge Array.find til at finde et emne giver vi en klarere idé om vores intention.

Erstatter Array.find med Array.some

Jeg indrømmer, at jeg har begået denne fejltagelse mange gange. Derefter fortalte en venlig ven mig om at tjekke MDN-dokumentationen for en bedre måde. Her er tinget: dette ligner meget vores Array.indexOf / Array.indbefatter sagen ovenfor.

I det foregående tilfælde så vi Array.find kræver et tilbagekald som et argument og returnerer et element. Er Array.find den bedste løsning, hvis vi har brug for at vide, om vores array indeholder en værdi eller ej? Sandsynligvis ikke, fordi det returnerer en værdi, ikke en boolsk.

I dette tilfælde anbefaler jeg at bruge Array.some, der returnerer den nødvendige boolean. Semantisk fremhæver også Array.some det faktum, at vi ikke har brug for det fundne emne.

Brug af Array.reduce i stedet for at kæde Array.filter og Array.map

Lad os indse det, Array.reduce er ikke let at forstå. Det er sandt! Men hvis vi kører Array.filter, så føles Array.map det som om vi mangler noget, ikke?

Jeg mener, vi gennemser arrayet to gange her. Første gang at filtrere og oprette en kortere matrix, anden gang for at oprette en ny matrix (igen!) Indeholdende nye værdier baseret på dem, vi har fået fra Array.filter. For at få vores nye array brugte vi to Array-metoder. Hver metode har sin egen tilbagekaldsfunktion og en matrix, som vi ikke kan bruge senere - den oprettet af Array.filter.

For at undgå lave præstationer om dette emne er mit råd at bruge Array.reduce i stedet. Samme resultat, bedre kode! Array.reduce giver os mulighed for at filtrere og tilføje de tilfredsstillende genstande i en akkumulator. Som et eksempel kan denne akkumulator være et tal, der skal øges, et objekt, der skal udfyldes, en streng eller en matrix, der skal konkateres.

I vores tilfælde, da vi har brugt Array.map, anbefaler jeg at bruge Array.reduce med en matrix til at konkatere som en akkumulator. Afhængigt af env-værdien tilføjer vi det følgende eksempel i vores akkumulator eller forlader denne akkumulator som den er.

Det er det!

Håber dette hjælper. Sørg for at give kommentarer, hvis du har nogen tanker om denne artikel eller har andre brugssager at vise. Og hvis du fandt det nyttigt, så giv mig nogle klapper og del det. Tak for at have læst!

PS: Du kan følge mig på Twitter her.

Bemærk: Som nævnt af malgosiastp og David Piepgrass i kommentarerne, skal du kontrollere supporten, før du bruger Array.find og Array.include, som i øjeblikket ikke understøttes af Internet Explorer.

Bemærk: Jeg har for nylig startet en blog, hvor jeg deler min rejse for at opbygge et publikum som udvikler. Klik her for at se!