Loopin JavaScript

Tässä opetusohjelmassa opit silmukan JavaScript-ohjelmasta esimerkkien avulla.

JavaScriptissä on kolme tapaa käyttää forsilmukkaa.

• JavaScript silmukalle
• JavaScript for… -silmukassa
• JavaScript … silmukalle

for… ofSilmukka otettiin käyttöön uudemmissa versioissa JavaScript ES6 .

for… ofSilmukka JavaScript voi tehdä muutoksia yli iterable esineitä (taulukot, sarjat, karttoja, jouset jne).

JavaScript … silmukalle

for… ofSilmukan syntaksi on:

 for (element of iterable) ( // body of for… of )

Tässä,

• iterable - iteroitava objekti (taulukko, joukko, merkkijonot jne.).
• elementti - iteroitavissa olevat kohteet

Selkeänä englanniksi voit lukea yllä olevan koodin seuraavasti: Suorita silmukan runko jokaiselle iteroitavan elementille.

varten… / Arrays

for… ofSilmukka voidaan kerrata yli jono. Esimerkiksi,

 // array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )

Tuotos

 John Sara Jack

Yllä olevassa ohjelmassa for… ofsilmukkaa käytetään iteroimaan opiskelijaryhmäobjektin yli ja näyttämään kaikki sen arvot.

for … of with Strings

Voit käyttää for… ofsilmukkaa iteroida merkkijonoarvojen yli. Esimerkiksi,

 // string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )

Tuotos

 koodi

for … of kanssa Sets

Voit toistaa Set-elementtien läpi for… ofsilmukan avulla. Esimerkiksi,

 // define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )

Tuotos

 1 2 3

varten… / Mapsin avulla

Voit toistaa karttaelementtien läpi for… ofsilmukan avulla. Esimerkiksi,

 // define Map let map = new Map(); // inserting elements map.set('name', 'Jack'); map.set('age', '27'); // looping through Map for (let (key, value) of map) ( console.log(key + '- ' + value); )

Tuotos

 nimi- Jack ikä- 27

Käyttäjän määrittämät iteraattorit

Voit luoda iteraattorin manuaalisesti ja käyttää for… ofsilmukkaa iteraattorien läpi. Esimerkiksi,

 // creating iterable object const iterableObj = ( // iterator method (Symbol.iterator)() ( let step = 0; return ( next() ( step++; if (step === 1) ( return ( value: '1', done: false); ) else if (step === 2) ( return ( value: '2', done: false); ) else if (step === 3) ( return ( value: '3', done: false); ) return ( value: '', done: true ); ) ) ) ) // iterating using for… of for (const i of iterableObj) ( console.log(i); )

Tuotos

 1 2 3

for … of with Generators

Koska generaattorit ovat iteroivia, voit ottaa iteraattorin käyttöön helpommalla tavalla. Sitten voit toistaa generaattoreiden läpi for… ofsilmukan avulla. Esimerkiksi,

 // generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )

Tuotos

 10 20 30

for… of Vs for… in

varten… /	varten… sisään
for… ofSilmukkaa käytetään iteraatiota arvojen kautta, joka iterable.	for… inSilmukkaa käytetään iteraatiota näppäinten läpi esineen.
for… ofSilmukka ei voi käyttää iteroimaan kohteen päälle.	Voit käyttää for… initerointia tällaisten taulukoiden ja merkkijonojen yli, mutta sinun tulisi välttää for… initeroitavien käyttämistä.

for… ofSilmukka otettiin käyttöön ES6 . Jotkin selaimet eivät ehkä tue sen käyttöä. Jos haluat lisätietoja, käy JavaScript-tuessa.