Javascript: for, for in, for of

A for ciklussal általában megszámolunk valamit, vagy számokat léptetünk.

Szintaktika:

for (inicializálás; feltétel; növekmény) {
utastás(ok)
}

Az inicializálás egy olyan kifejezés, amely kezdőértéket ad a ciklusnak – ez egyszer, a ciklus elején fut le. A feltétel kifejezés azt határozza meg, hogy meddig kell a ciklust ismételni. Amikor a kifejezés hamisként értékelődik ki, a ciklus nem folytatódik. Végezetül a növekmény egy olyan kifejezés, amely minden ismétlődés után végrehajtódik a ciklusban. Mindezen összetevők opcionálisak.

For ciklus példák:

Számoljunk el 0-tól 20-ig, és az értékeket jelenítsük meg! Az i változó értéke kezdetben 0, majd amíg kisebb egyenlő, mint 20, minden ciklusban eggyel növeljük az értékét.

for (i=0; i &lt;=20; ++i) 
{ document.write(i, ''); }

1 2	for (i=0; i <=20; ++i) { document.write(i, ''); }

Visszafelé, 20-tól 0-ig:

for (i=20; i &gt;=0; --i)
{ document.write(i, ''); }

1 2	for (i=20; i >=0; --i) { document.write(i, ''); }

Számoljunk el 0-tól 20-ig kettesével:

for (i=0; i &lt;=20; i+=2) 
{ document.write(i, ''); }

1 2	for (i=0; i <=20; i+=2) { document.write(i, ''); }

Számoljunk el 20-tól 0-ig kettesével:

for (i=20; i &gt;=0; i-=2) 
{ document.write(i, ''); }

1 2	for (i=20; i >=0; i-=2) { document.write(i, ''); }

Írassuk ki 10x, hogy szeretünk programozni

for (i=0; i&lt;10; i++) 
{ document.write("Szeretek programozni!"); }

1 2	for (i=0; i<10; i++) { document.write("Szeretek programozni!"); }

Keressük meg 0-100 között a páros számokat!

for (i=1; i &lt;= 100; ++i) {
if (i%2==0)
{document.write(i, '');}
}

for (i=1; i <= 100; ++i) {

if (i%2==0)

{document.write(i, '');}

}

Megszámlálás. Hány darab páros szám található 0-100 között?

var db = 0; // Ebben a változóban számoljuk meg a mennyiséget 
for (i=1; i &lt;= 100; ++i) {
  if (i%2==0) 
  { ++db; } // Ha a feltétel igaz, akkor növeli a változót 
  } 
document.write('1 és 100 között ',db,' darab szám van.');

var db = 0; // Ebben a változóban számoljuk meg a mennyiséget

for (i=1; i <= 100; ++i) {

if (i%2==0)

{ ++db; } // Ha a feltétel igaz, akkor növeli a változót

}

document.write('1 és 100 között ',db,' darab szám van.');

Összegzés. Adjuk össze 1 és 100 között a számokat. Mennyi az eredmény?

var szum = 0; // Ebben a változóban számoljuk meg a mennyiséget
for (i=1; i &lt;= 100; ++i) {
  szum += i; // szum = szum + i.
  }
document.write('1 és 100 között a számok összege=', szum, '
');

var szum = 0; // Ebben a változóban számoljuk meg a mennyiséget

for (i=1; i <= 100; ++i) {

szum += i; // szum = szum + i.

}

document.write('1 és 100 között a számok összege=', szum, '

');

Keressük meg, hány darab páros szám található két bekért szám között!

function teszt() {
var db = 0; // Ebben a változóban számoljuk meg a mennyiséget 
var a=parseFloat(document.urlap.SZAM1.value);
var b=parseFloat(document.urlap.SZAM2.value);
for (i=b; i 
  if (i%2==0) 
  { ++db; } // Ha a feltétel igaz, akkor növeli a változót 
  } 
  document.write(b,' és ',a,' között ',db,' darab páros szám van.'); 
}

function teszt() {

var db = 0; // Ebben a változóban számoljuk meg a mennyiséget

var a=parseFloat(document.urlap.SZAM1.value);

var b=parseFloat(document.urlap.SZAM2.value);

for (i=b; i

if (i%2==0)

{ ++db; } // Ha a feltétel igaz, akkor növeli a változót

}

document.write(b,' és ',a,' között ',db,' darab páros szám van.');

}

Készítsünk egy szorzótáblát for ciklus segítségével! Az egyik a sorokat, a másik az oszlopokat jeleníti meg. Extraként egy kis css segítségével még meg is formázzuk…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Szorzótábla</title>

<style>

#szorzotabla
{
border : solid 1px green ;
box-shadow : 4px 4px 4px #6A6 ;
border-radius : 8px ;
background-color : #3A3 ;
}

#szorzotabla tr td
{
width : 24px ;
text-align : right ;
padding-right : 4px ;
line-height : 20px ;
font-family : Arial ;
font-size : 12px ;
border-radius : 8px ;
background-color : #FFF ;
}
</style>
</head>
<body>
<s.c.r.i.p.t type="text/javascript">
  document.write( "<table align=center border='1' id='szorzotabla'>" );
  for( i=1; i<=10; i++ )
  {
  document.write( "<tr>" );
  for( j=1; j<=10; j++ )
  {
  if( i==1 || j==1) document.write( "<td width='5%' >" + i*j + "</td>" );
  else document.write( "<td title='" +i+ "*" +j+ "'>" + i*j + "</td>" );
  }
  document.write( "</tr>" );
  }
  document.write( "</table>" );
</s.c.r.i.p.t>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Szorzótábla</title>

<style>

#szorzotabla

{

border : solid 1px green ;

box-shadow : 4px 4px 4px #6A6 ;

border-radius : 8px ;

background-color : #3A3 ;

}

#szorzotabla tr td

{

width : 24px ;

text-align : right ;

padding-right : 4px ;

line-height : 20px ;

font-family : Arial ;

font-size : 12px ;

border-radius : 8px ;

background-color : #FFF ;

}

</style>

</head>

<body>

<s.c.r.i.p.t type="text/javascript">

document.write( "<table align=center border='1' id='szorzotabla'>" );

for( i=1; i<=10; i++ )

{

document.write( "<tr>" );

for( j=1; j<=10; j++ )

{

if( i==1 || j==1) document.write( "<td width='5%' >" + i*j + "</td>" );

else document.write( "<td title='" +i+ "*" +j+ "'>" + i*j + "</td>" );

}

document.write( "</tr>" );

}

document.write( "</table>" );

</s.c.r.i.p.t>

</body>

</html>

for of

A for...of ciklus egy iterálható objektum (tömb,Set, Map,String) elemein való végighaladásra szolgál. Nem adja vissza a kulcsokat vagy az indexeket, csak az értékeket!

// tömb esetében
const autok= ["Dacia", "Volvo", "Lada"];
let text = "";
for (let x of autok) {
  text += x; // document.write(x) 
}

// string esetében
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x;
}

// map
const munkakor = new Map();
munkakor.set("Béla", "admin");
munkakor.set("Géza", "szerkesztő");
for (let [dolgozo, munka] of munkakor) 
{ console.log(`${dolgozo}: ${munka}`); }

// set
const szamok = new Set([1, 2, 3, 3, 4]);
for (let number of szamok) 
{ console.log(number); }

// tömb esetében

const autok= ["Dacia", "Volvo", "Lada"];

let text = "";

for (let x of autok) {

text += x; // document.write(x)

}

// string esetében

let language = "JavaScript";

let text = "";

for (let x of language) {

text += x;

}

// map

const munkakor = new Map();

munkakor.set("Béla", "admin");

munkakor.set("Géza", "szerkesztő");

for (let [dolgozo, munka] of munkakor)

{ console.log(`${dolgozo}: ${munka}`); }

// set

const szamok = new Set([1, 2, 3, 3, 4]);

for (let number of szamok)

{ console.log(number); }

for in

A for…in ciklus egy objektum kulcsainak (property-jeinek) bejárására szolgál. Tömbök esetén is működik, de nem javasolt használni.

const objektumom = {
  név: "Teszt",
  kor: 30,
  város: "Budapest"
};

for (let key in objektumom ) {
  console.log(`${key}: ${objektumom [key]}`);
}

const objektumom = {

név: "Teszt",

kor: 30,

város: "Budapest"

};

for (let key in objektumom ) {

console.log(`${key}: ${objektumom [key]}`);

}

Javascript: for, for in, for of

For ciklus példák:

for of

for in

Kategóriák

Friss bejegyzések

C# REST API kezelés

JavaScript Date