繰り返し処理を実行する（for文とwhile文） - Javascript

for文

for文は、同じ処理を指定した回数繰り返し実行することができます。以下のコードは、1から10までの数字を表示します。

for(let i = 1; i <= 5; i++){
    console.log(i);
};

// 結果
1
2
3
4
5

次の表は、オブジェクトをfor文で利用可能か表したものです。

NodeList オブジェクト 利用可能
HTMLCollection オブジェクト 利用可能

HTML

<ul id="box1">
  <li id="list1_1" class="list">List 1-1</li>
  <li id="list1_2" class="list">List 1-2</li>
  <li id="list1_3" class="list">List 1-3</li>
</ul>

上記のHTMLのlistクラスをjavascript取得し、forで処理する例です。

NodeList オブジェクトをfor文で処理する例です。

script.js

window.addEventListener('load', ()=>{
  let target = document.querySelectorAll('.list'); // NodeList オブジェクト

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

以下は、HTMLCollection オブジェクトをfor文で処理する例です。

script.js

window.addEventListener('load', ()=>{
  let target = document.getElementsByClassName('list'); // HTMLCollection オブジェクト

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

for ... of

「 for ... of 」を使うと反復可能オブジェクトから取り出した値を1つずつ順次処理します。

const arr = [1, 3, 5, 7, 9];

for(let i of arr){
  console.log(i);
};

// 結果
1
3
5
7
9
let arr = [
    { name: "taro" },
    { name: "hanako" },
    { name: "Jiro" }
]

for (let i of arr){
  console.log(i);
}

// 結果
{ name: 'taro' }
{ name: 'hanako' }
{ name: 'Jiro' }
let arr = [
    { name: "taro" },
    { name: "hanako" },
    { name: "Jiro" }
];

for (let i of arr){
  console.log(i["name"]);
}

// 結果
taro
hanako
Jiro

次の表は、オブジェクトをfor...of文で利用可能か表したものです。

NodeList オブジェクト 利用可能
HTMLCollection オブジェクト 利用可能

HTML

<ul id="box1">
  <li id="list1_1" class="list">List 1-1</li>
  <li id="list1_2" class="list">List 1-2</li>
  <li id="list1_3" class="list">List 1-3</li>
</ul>

上記のHTMLのlistクラスをjavascript取得し、NodeList オブジェクトをfor...ofで処理する例です。

NodeList オブジェクトをfor...of文で処理する例です。

script.js

window.addEventListener('load', ()=>{
  let target = document.querySelectorAll('.list'); // NodeList オブジェクト

  for(let i of target){
    console.log(i.innerText)
  };
})

以下は、HTMLCollection オブジェクトをfor...of文で処理する例です。

script.js

window.addEventListener('load', ()=>{
  let target = document.getElementsByClassName	('list'); // HTMLCollection オブジェクト

  for(let i of target){
    console.log(i.innerText)
  };
})

for ... in

オブジェクトのプロパティを取得します。

配列に for...in を使うと処理の順序が保証されなかったり、余分なものが処理されます。

let user = {
    name : 'Taro',
    age : 28,
    contory: 'Japan'
};

for(let i in user){
  console.log(i);
};

forEach

配列、SETオブジェクト、MAPオブジェクトで利用可能です。

forEach では、continue、break は利用できません。

let fruits = ["orange", "banana", "apple"];

fruits.forEach(function(value, index, fruits){
  console.log(fruits + " => " + index + ":" + value);
});

// 結果
orange,banana,apple => 0:orange
orange,banana,apple => 1:banana
orange,banana,apple => 2:apple
let users = [
    { name : "Taro", age : 28 },
    { name : "hanako", age : 30},
    { name : "Jon", age : 18}
];

users.forEach(function(user){
  console.log(user.name + ":" + user.age);
});

次の表は、オブジェクトをforEach文で利用可能か表したものです。

NodeList オブジェクト Array.from() で配列に変換してから使う
HTMLCollection オブジェクト Array.from() で配列に変換してから使う

HTML

<ul id="box1">
  <li id="list1_1" class="list">List 1-1</li>
  <li id="list1_2" class="list">List 1-2</li>
  <li id="list1_3" class="list">List 1-3</li>
</ul>

上記のHTMLのlistクラスをjavascript取得し、NodeList オブジェクトをforEachで処理する例です。

script.js

window.addEventListener('load', ()=>{
  let target = document.querySelectorAll('.list'); // NodeList オブジェクト

  Array.from(target).forEach(function(value, index, target){
    console.log(value.innerText)
  })
})

以下は、HTMLCollection オブジェクトをforEachで処理する例です。

script.js

window.addEventListener('load', ()=>{
  let target = document.getElementsByClassName('list'); // HTMLCollection オブジェクト

  Array.from(target).forEach(function(value, index, target){
    console.log(value.innerText)
  })
})

while文

while文は、条件が成り立つ限り処理を繰り返し実行します。

let num = 0;

while( num < 10) {
  console.log(num);
  num += 1;
};

無限ループ

無限ループを使うと、時間の計測や特定のタスクを定期的に実行したり、ユーザーに何か入力してもらうプログラムで利用できます。

次のプログラムを実行すると無限ループの為、ずっと「 a 」が表示され続けます。

プログラミングの内容によっては、無限ループをそのままにしておくと処理し続けるので、メモリ容量などを圧迫してパソコンがフリーズする場合があります。

無限ループを終了するには、強制的にプログラムを終了する必要があります。終了条件などを指定していない場合は、コマンドプロンプトの画面の場合であれば、「 Ctrl + c 」でプログラムを強制終了します。

while(true) {
  console.log("a");
};

while文のブロックの中で無限ループの終了条件を作るには、以下のように書きます。

let num = 0;

while(true) {
  if(num == 10){
      break;
  }
  console.log(num);
  num += 1;
};