Näin voit hyödyntää JavaScriptiryhmiä paremmin

Kuva Ben White on Unsplash

Nopeasti lukea, lupaan. Muutaman viime kuukauden aikana huomasin, että täsmälleen samat neljä virhettä tulivat takaisin takaisin tarkistamieni vetopyyntöjen kautta. Postitan myös tämän artikkelin, koska olen tehnyt kaikki nämä virheet itse! Selataan niitä varmistaaksemme, että käytämme oikein Array-menetelmiä!

Array.indexOf korvaaminen Array.includes

”Jos etsit jotain ryhmästäsi, käytä Array.indexOfia.” Muistan lukevani tämän lauseen kurssillani opiskellessani JavaScriptiä. Lause on täysin totta, epäilemättä!

Array.indexOf “palauttaa ensimmäisen hakemiston, josta tietty elementti löytyy”, sanotaan MDN-dokumentaatiossa. Joten jos käytämme palautettua hakemistoa myöhemmin koodissamme, ja Array.indexOf on ratkaisu.

Mutta entä jos meidän tarvitsee vain tietää, sisältääkö taulukkomme arvoa vai ei? Vaikuttaa kyllä ​​/ ei-kysymykseltä, sanoisin boolen kysymys. Suosittelen tällöin Array.include-sovelluksen käyttöä, joka palauttaa boolen.

Array.findin käyttö Array.filterin sijasta

Array.filter on erittäin hyödyllinen menetelmä. Se luo uuden taulukon toisesta, jolloin kaikki kohteet ohittavat takaisinsoittoargumentin. Kuten nimensä osoittaa, meidän on käytettävä tätä menetelmää suodattamiseen ja lyhyemmän taulukon saamiseen.

Mutta jos tiedämme, että takaisinsoitto-funktiomme voi palauttaa vain yhden kohteen, en suosittele sitä - esimerkiksi käytettäessä takaisinsoittoargumenttia suodattamalla yksilöllisen tunnuksen kautta. Tässä tapauksessa Array.filter palauttaa uuden taulukon, joka sisältää vain yhden kohteen. Etsimällä tiettyä tunnusta, tarkoituksemme voi olla käyttää taulukon ainoaa arvoa, mikä tekee tästä taulukosta hyödytöntä.

Puhutaanpa esityksestä. Jos haluat palauttaa kaikki soittopyyntöä vastaavat kohteet, Array.filter on selattava koko ryhmää. Kuvailkaamme myös, että meillä on satoja tuotteita, jotka täyttävät takaisinsoittoväitteemme. Suodatettu joukomme olisi aika iso.

Suosittelen Array.findia näiden tilanteiden välttämiseksi. Se vaatii takaisinsoittoargumentin, kuten Array.filter, ja palauttaa ensimmäisen tätä takaisinsoittoa tyydyttävän elementin arvon. Lisäksi Array.find pysähtyy heti, kun kohde tyydyttää soittopyynnön. Koko taulukkoa ei tarvitse selata. Lisäksi, käyttämällä Array.findia kohteen löytämiseen, annamme selkeämmän kuvan aikomuksestasi.

Array.findin korvaaminen Array.somalla

Myönnän, että olen tehnyt tämän virheen monta kertaa. Sitten ystävällinen ystävä käski minun tarkistaa MDN-dokumentaatio paremman tavan. Tässä on asia: tämä on hyvin samanlainen kuin yllä oleva tapaus Array.indexOf / Array.includes.

Edellisessä tapauksessa näimme, että Array.find vaatii takaisinsoiton argumenttina ja palauttaa elementin. Onko Array.find paras ratkaisu, jos meidän on tiedettävä, sisältyykö taulukkoon arvo vai ei? Todennäköisesti ei, koska se palauttaa arvon, ei boolean.

Suosittelen tässä tapauksessa Array.somea, joka palauttaa tarvittavan boolean. Semanttisesti Array.some -sovellus korostaa myös sitä, että emme tarvitse löydettyä tuotetta.

Array.reducen käyttö ketjujen Array.filter ja Array.map sijasta

Tarkastellaanpa, Array.reduce ei ole helppo ymmärtää. Se on totta! Mutta jos suoritamme Array.filter, niin Array.map tuntuu siltä, ​​että puuttuu jotain, eikö niin?

Tarkoitan, selaamme taulukkoa kahdesti täällä. Ensimmäistä kertaa suodatetaan ja luodaan lyhyempi taulukko, toisen kerran luodaan uusi taulukko (jälleen!), Joka sisältää uusia arvoja Array.filteristä saatujen arvojen perusteella. Uuden taulukkomme saamiseksi käytimme kahta taulukkomenetelmää. Jokaisella menetelmällä on oma takaisinsoitintoiminto ja taulukko, jota emme voi käyttää myöhemmin - Array.filterin luoma menetelmä.

Vältä alhaiset esitykset aiheesta, suositukseni on käyttää Array.reducea sen sijaan. Sama tulos, parempi koodi! Array.reduce antaa meille mahdollisuuden suodattaa ja lisätä tyydyttävät tavarat akkuun. Esimerkiksi tämä akku voi olla lisääntyvä numero, täytettävä esine, merkkijono tai yhdistävä taulukko.

Koska olemme käyttäneet Array.map-sovellusta, suosittelemme Array.reduce -sovelluksen käyttämistä taulukon kanssa akkumulaattoriksi. Seuraavassa esimerkissä, riippuen env-arvosta, lisäämme sen akkuomme tai jätämme tämän akun sellaisenaan.

Se siitä!

Toivottavasti tämä auttaa. Muista jättää kommentteja, jos sinulla on ajatuksia tästä artikkelista tai jos sinulla on muita käyttötapauksia näyttää. Ja jos pidit siitä hyödyllistä, anna minulle joitain claps ja jaa se. Kiitos lukemisesta!

PS: Voit seurata minua Twitterissä täällä.

Huomaa: Kuten malgosiastp ja David Piepgrass mainitsivat kommentteissa, tarkista tuki ennen Array.find- ja Array.includes-sovellusten käyttöä, joita Internet Explorer ei tällä hetkellä tue.

Huomaa: Aloitin äskettäin blogin, jossa jaan matkan rakentaakseen yleisöä kehittäjäksi. Napsauta tätä katsoaksesi!