JavaScripti jokaiselle - Miten edetä taulukkoon JS: ssä

JavaScript forEach -menetelmä on yksi monista tavoista siirtyä matriisien läpi. Jokaisella menetelmällä on erilaiset ominaisuudet, ja sinun on päätettävä, mitä käytät, sen mukaan, mitä olet tekemässä.

Tässä viestissä aiomme tarkastella tarkemmin JavaScript forEach -menetelmää.

Ottaen huomioon, että meillä on seuraava taulukko:

const numbers = [1, 2, 3, 4, 5];

Perinteisen "for loop" -toiminnon käyttäminen matriisin läpi siirtymiseen olisi seuraava:

for (i = 0; i < numbers.length; i++) { console.log(numbers[i]); } 

Mikä tekee forEach () -metodista erilaisen?

ForEach-menetelmää käytetään myös silmukoiden siirtämiseen matriisien läpi, mutta se käyttää funktiota eri tavalla kuin klassinen "for loop" -toiminto.

ForEach-menetelmä välittää kutsujoukon jokaiselle elementille takaisinkutsufunktion sekä seuraavat parametrit:

  • Nykyinen arvo (pakollinen) - Nykyisen taulukkoelementin arvo
  • Hakemisto (valinnainen) - Nykyisen elementin hakemistonumero
  • Matriisi (valinnainen) - matriisiobjekti, johon nykyinen elementti kuuluu

Haluan selittää nämä parametrit askel askeleelta.

Ensinnäkin, jotta voit siirtyä taulukon läpi forEach-menetelmällä, tarvitset soittopyynnön (tai tuntemattoman toiminnon):

numbers.forEach(function() { // code });

Toiminto suoritetaan jokaiselle matriisin elementille. Siinä on oltava vähintään yksi parametri, joka edustaa taulukon elementtejä:

numbers.forEach(function(number) { console.log(number); });

Se on kaikki mitä meidän on tehtävä silmukan siirtämiseksi taulukon läpi:

Vaihtoehtoisesti voit käyttää koodin yksinkertaistamiseen ES6-nuolitoiminnon esitystä:

numbers.forEach(number => console.log(number));

Valinnaiset parametrit

Indeksi

Selvä nyt jatketaan valinnaisilla parametreilla. Ensimmäinen on "index" -parametri, joka edustaa kunkin elementin indeksinumeroa.

Pohjimmiltaan voimme nähdä elementin indeksinumeron, jos sisällytämme sen toisena parametrina:

numbers.forEach((number, index) => { console.log('Index: ' + index + ' Value: ' + number); });

Taulukko

Taulukon parametri on itse taulukko. Se on myös valinnainen ja sitä voidaan käyttää tarvittaessa eri toiminnoissa. Muuten, jos kutsumme sitä, se vain tulostetaan niin monta kertaa kuin matriisin elementtien lukumäärä:

numbers.forEach((number, index, array) => { console.log(array); });

Tässä videossa on esimerkki forEach () -menetelmän käytöstä:

Selaimen tuki

Array.forEach-menetelmää tuetaan kaikissa selaimissa, jotka odottavat IE-versiota 8 tai sitä vanhempaa:

Jos haluat oppia lisää verkkokehityksestä, käy vapaasti Youtube-kanavallani.

Kiitos, että luit!