Käytä hyödyllisiä Array-toimintoja JavaScriptissä

JavaScriptin maailmassa Arrays on perustavanlaatuinen tietotyyppi, jota käytät usein. Jokaisen uuden ECMAScript-version myötä Arraysin käsittely on parantunut erilaisten innovatiivisten menetelmien avulla. Tässä oppaassa opit hyödyntämään joitakin hyödyllisimmistä uusista Array-toiminnoista, jotka on otettu käyttöön ES6:sta ES13:een. Tarkastelemme sekä uusia että hyvin todettuja toimintoja, jotka auttavat sinua työskentelemään tehokkaammin Arraysien kanssa.

Tärkeimmät havainnot

• find(): Etsi Arraysta ja löydä ensimmäinen elementti, joka täyttää tietyn kriteerin.
• filter(): Luo uusi Array kaikista elementeistä, jotka täyttävät annetut ehdot.
• map(): Muuta Arrayn elementtejä ja tuota uusi Array.
• reduce(): Yhdistele kaikki Arrayn elementit yhteen arvoon.
• some(), every(): Tarkista, täyttääkö vähintään yksi elementti tai kaikki Arrayn elementit tietyn ehdon.

Askeltaitoiset ohjeet

1. Ymmärrä find()-menetelmä

find()-menetelmä on yksi niistä toiminnoista, jotka otettiin käyttöön ES6:ssa. Käytät sitä etsiäksesi tiettyä elementtiä Arraysta. Nimi kertoo jo kaiken: find():n avulla etsit Arrayta ja se palauttaa ensimmäisen elementin, joka täyttää kriteerisi.

Jotta voit käyttää find():a, sinun tulee antaa callback-funktio, joka määrittelee ehdon. Tätä funktiota kutsutaan jokaiselle elementille Arrayssa.

Tässä esimerkissä "Orange" löydetään ja palautetaan. Jos etsit muuta väriä, tulos voi olla vastaavasti erilainen.

2. findIndex() etsimään haettavan elementin indeksiä

find():n lisäksi on myös findIndex(), joka palauttaa ensimmäisen elementin, joka täyttää ehdon, indeksin. Tämä on hyödyllistä, kun tarvitset todellista indeksiä Arrayssa.

Tässä tapauksessa foundFruitIndex palauttaa "Orangen" indeksin, joka on 2, koska Arrays ovat nollapohjaisia.

3. Filtraa Arrays filter():n avulla

filter()-menetelmä mahdollistaa uuden Arrayn luomisen, joka sisältää vain ne elementit, jotka täyttävät tietyn ehdon. Tässä käytämme filter():ä palauttamaan kaikki hedelmät, joiden pituus on suurempi kuin 5.

Tulos näyttää sitten kaikki hedelmät, jotka sisältävät yli viisi kirjainta, kuten "Banana".

4. map() transformaatiota varten

map()-menetelmällä voit muuttaa Arrayn arvoja ja luoda uuden Arrayn. Esimerkiksi saadaksesi hedelmän nimien pituudet.

Tässä saat hedelmän nimien pituudet Arrayna: [5, 6, 6, 6].

5. reduce() arvojen yhteenvetoon

reduce()-menetelmä on yksi tehokkaimmista toiminnoista, joka auttaa sinua tiivistämään kaikki Arrayn arvot yhdeksi arvoksi.

Tulos on 15, koska kaikki arvot on lisätty yhteen.

6. Tarkasta ehtoja some():n ja every():n avulla

some() ja every() menetelmät tarkistavat Arrayn elementit ehdoilla. some():lla kysyt, täyttääkö ainakin yksi elementti ehdon, kun taas every():n avulla varmistat, että kaikki elementit täyttävät sen.

Tässä hasLargeFruits näyttää, onko vähintään yksi hedelmä, joka on yli kuusi kirjainta pitkä.

7. Array.from() Arrayn luomiseen

Tämä menetelmä mahdollistaa Arrayn luomisen toisesta rakenteesta.

Tässä HTML-kokoelma muutetaan todelliseksi Arrayksesi, jotta voit käyttää Array-toimintoja siihen.

8. Tarkista, onko jokin Array Array.isArray():n avulla

Tarkistaaksesi, onko objekti Array, käytät Array.isArray()-menetelmää.

Tulos on true, koska fruits on Array.

Yhteenveto – Hyödylliset uudet Array-toiminnot JavaScriptissä

Tässä laajassa oppaassa olet oppinut, kuinka voit hyödyntää erilaisia Array-toimintoja JavaScriptissä tehokkaasti, alkaen kaikkien tuntemista find(), filter(), map() ja reduce() toiminnoista aina harvemmin käytettyihin, mutta silti hyödyllisiin menetelmiin kuten some(), every(), Array.from() ja Array.isArray(). Nämä toiminnot tekevät koodistasi ajankohtaisempaa ja tietojenkäsittelystä tehokkaampaa. Kokeile näitä menetelmiä projekteissasi optimoidaksesi suhdettasi Arraysien kanssa.