Kasulikud array-funktsioonid JavaScriptis kasutada

Maailmas JavaScript on massivid fundamentaalne andmetüüp, mida kasutad sageli. Iga uue ECMAScript'i versiooniga on massiivide käsitlemine erinevate innovaatiliste meetodite kaudu paranenud. Selles õpetuses õpid sa, kuidas kasutada mõningaid kõige kasulikumaid uusi massiivi funktsioone, mis on kasutusele võetud ES6 kuni ES13. Selle käigus vaatame uusi ja katsetatud funktsioone, mis aitavad sul massiividega tõhusamalt töötada.

Olulisemad leiutised

• find(): Otsi massiivist ja leia esimene element, mis vastab kindlale kriteeriumile.
• filter(): Loo uus massiiv, mis sisaldab kõiki elemente, mis vastavad antud tingimusele.
• map(): Muuda massiivi elemente ja loo uus massiiv.
• reduce(): Kokkuvõta kõik massiivi elemendid üheks väärtuseks.
• some(), every(): Kontrolli, kas vähemalt üks element või kõik massiivi elemendid vastavad teatud tingimusele.

Samm-sammuline juhend

1. find()-meetodi mõistmine

find()-meetod on üks funktsioonidest, mis loodi ES6. Kasutad seda, et leida kindel element massiivist. Nimi ütleb juba kõik: find() otsib massiivist ja tagastab esimese elemendi, mis sinu kriteeriume täidab.

find() kasutamiseks edastad tagasitootva funktsiooni, mis määratleb tingimuse. Seda funktsiooni kutsutakse välja iga massiivi elemendi puhul.

Selles näites leitud ja tagastatud "apelsin". Kui otsid teist värvi, võib tulemus olla vastavalt erinev.

2. findIndex() otsitava elemendi indeksi leidmiseks

Lisaks find() on olemas ka findIndex(), mis tagastab esimese elemendi indeksi, mis vastab tingimusele. See on kasulik, kui vajad massiivis tõelist indeksi.

Selles olukorras tagastab foundFruitIndex indeksi "apelsin" jaoks, mis on 2, kuna massiivid on null-põhised.

3. filter() massiivide filtreerimiseks

filter()-meetod võimaldab sul luua uue massiivi, mis sisaldab vaid neid elemente, mis vastavad teatud tingimusele. Siin kasutame filter(), et tagastada kõik puuviljad, mille pikkus on suurem kui 5.

Tulemus näitab siis kõiki puuvilju, millel on rohkem kui viis tähte, nt "banaan".

4. map() transformatsioonide jaoks

map()-meetodiga saad muuta massiivi väärtusi ja luua uue massiivi. Näiteks puuviljanimede pikkuste saamiseks.

Siin saad puuviljanimede pikkused massiivina: [5, 6, 6, 6].

5. reduce() väärtuste kokkuvõtmiseks

reduce()-meetod on üks võimsamaid funktsioone, mis aitab sul kõik massiivi väärtused kokku tihendada üheks väärtuseks.

Tulemus on 15, kuna kõik väärtused on liidetud.

6. some() ja every() tingimuste kontrollimiseks

some() ja every() meetodid kontrollivad massiivi elemente tingimuste suhtes. some() küsib, kas vähemalt üks element vastab tingimusele, samas kui every() tagab, et kõik elemendid seda täidavad.

Siin näitab hasLargeFruits, kas on vähemalt üks puuvili, millel on rohkem kuus tähte.

7. Array.from() massiivide loomiseks

See meetod võimaldab sul luua massiivi teisest struktuurist.

Sellega muundatakse HTML-collection tõeliseks massiiviks, et saaksid selle peal rakendada massiivi meetodeid.

8. Kontrolli, kas midagi on massiiv Array.isArray() abil

Kuna kontrollida, kas objekt on massiiv, kasutad Array.isArray() meetodit.

Tulemus on true, kuna fruits on massiiv.

Kokkuvõte – Kasulikud uued massiivi funktsioonid JavaScriptis

Selles ulatuslikus juhendis oled õppinud, kuidas kasutada erinevaid massiivi funktsioone JavaScriptis tõhusalt, alustades kõikide tuntud funktsioonide nagu find(), filter(), map() ja reduce() kuni vähem kasutatud, kuid siiski kasulike meetoditeni nagu some(), every(), Array.from() ja Array.isArray(). Need funktsioonid muudavad su koodi kaasaegsemaks ja andmete töötlemise tõhusamaks. Katseta neid meetodeid oma projektides, et optimeerida oma tööd massiividega.