ループ文〜モダンなJavaScript

ループ文は繰り返し何かを実行するために必須のアルゴリズムです。JavaScriptで利用可能なループ処理を学習します。

for文

for文によるループは、指定された条件が「false」と評価されるまで繰り返されます。

continue

ある特定の条件だけループから外すことができます。

continue参考例

for(let i = 0; i < 10; i++){
  if(i === 7){
    console.log('7 is my lucky number');
    continue;
  }
  console.log('Number '+ i);
}
&#91;/js&#93;

結果
<a href="https://itstudio.co/wp-content/uploads/2018/09/js001.png"><img src="https://itstudio.co/wp-content/uploads/2018/09/js001.png" alt="" width="216" height="272" class="alignnone size-full wp-image-8219" /></a>

<h3>break</h3>
break を使用すると、for文はただちに終了します。

for(let i = 0; i < 10; i++){
  if(i === 5){
   console.log('Stop the loop');
   break;
 }
  console.log('Number '+ i);
}
&#91;/js&#93;

<h2>WHILE ループ文</h2>
while文は指定された条件が「true」に評価される限り文を実行します。

let i = 0;

while(i < 10){
   console.log('Number ' + i);
   i++;
}
&#91;/js&#93;

<h2>DO WHILE ループ文</h2>
do...while文は指定された条件が「false」になるまで繰り返します。ただし、条件式がチェックされる前に一度実行されます。


let i = 100;

do {
   console.log('Number ' + i);
   i++;
}while(i < 10);
&#91;/js&#93;

<h2>配列の展開でループ文の活用</h2>
<h3>for文の例</h3>


const cars = ['Nissan', 'Suzuki', 'Honda', 'Toyota'];

for(let i = 0; i < cars.length; i++){
   console.log(cars&#91;i&#93;);
}
&#91;/js&#93;
<h3>forEach文の例</h3>


cars.forEach(function(car, index, array){
   console.log(`${index} : ${car}`);
   console.log(array);
});

for in文の例

const user = {
  firstName: 'Masaharu', 
  lastName: 'Tahara',
  age: 40
}

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

map

mapはループ文ではありませんが、配列に対して便利に使えまるメソッドです。
各要素1つずつに対して「コールバック関数」を実行し、その結果を新しい配列として返すことが出来ルものです。

const users  = [
  {id: 1, name:'Oda'},
  {id: 2, name: 'Toyotomi'},
  {id: 3, name: 'Tokugawa'},
  {id: 4, name: 'Asikaga'}
];

const new_users = users.map(function(user){
  return 'Mr. ' + user.name;
});

console.log(new_users);

結果