JavaScript forEach - kuidas JS-is massiivi kaudu loopida

JavaScripti forEach meetod on üks mitmest võimalusest massiividest läbi liikumiseks. Igal meetodil on erinevad funktsioonid ja teie otsustada, millist meetodit kasutada, oleneb sellest, mida teete.

Selles postituses vaatleme JavaScripti iga meetodit lähemalt.

Arvestades, et meil on allpool järgmine massiiv:

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

Traditsioonilise "for loop" -i kasutamine massiivi läbimiseks oleks järgmine:

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

Mille poolest meetod forEach () erineb?

ForEachi meetodit kasutatakse ka massiivide kaudu loopimiseks, kuid see kasutab funktsiooni erinevalt kui klassikaline "for loop".

ForEach-meetod edastab massiivi iga elemendi tagasihelistamisfunktsiooni koos järgmiste parameetritega:

  • Praegune väärtus (kohustuslik) - praeguse massiivi elemendi väärtus
  • Indeks (valikuline) - praeguse elemendi indeksi number
  • Massiiv (valikuline) - massiivi objekt, kuhu praegune element kuulub

Lubage mul neid parameetreid samm-sammult selgitada.

Esiteks, massiivi läbimiseks meetodi forEach abil vajate tagasihelistamisfunktsiooni (või anonüümset funktsiooni):

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

Funktsioon käivitatakse massiivi iga elemendi jaoks. See peab sisaldama vähemalt ühte parameetrit, mis tähistab massiivi elemente:

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

See on kõik, mida peame massiivi kaudu silmuseks tegema:

Teise võimalusena saate koodi lihtsustamiseks kasutada ES6 noolefunktsiooni:

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

Valikulised parameetrid

Indeks

Olgu, jätkame nüüd valikuliste parameetritega. Esimene neist on parameeter "index", mis tähistab iga elemendi indeksi numbrit.

Põhimõtteliselt näeme elemendi indeksi numbrit, kui lisame selle teise parameetrina:

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

Massiiv

Massiivi parameeter on massiiv ise. See on ka valikuline ja seda saab vajadusel kasutada erinevates toimingutes. Vastasel juhul, kui seda nimetame, prinditakse see lihtsalt nii mitu korda kui massiivi elementide arv:

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

Meetodi forEach () kasutamise näidet näete selles videos:

Brauseri tugi

Array.forEach-meetodit toetavad kõik brauserid, mis eeldavad IE versiooni 8 või varasemat:

Kui soovite veebiarenduse kohta rohkem teada saada, külastage julgelt minu Youtube'i kanalit.

Aitäh, et lugesid!