More than 3 years have passed since last update.

Javascript基礎知識＃5（for文）

Last updated at 2020-11-15Posted at 2020-11-15

##はじめに
この記事は私の脱コピペを目指すために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

##目次

#1. 繰り返し処理とは
同じ処理を何回か繰り返したいときに使う処理。

繰り返し処理を使えば何回も同じコードを書かなくて済む。

#2. for文とは
決められた回数だけ処理を繰り返す場合に使用します。
事前にどんな処理を何回繰り返すのかを決めておくのが一般的です。

#3. for文の書き方
for文の基本形は下記のような感じです。

for ( カウンタ変数定義と初期化; 繰り返し回数の指定; カウンタ加算幅) {
  // 繰り返す処理を書く
}

for文は、3つの引数を与えてあげるのが一般的です。

1. カウンタ変数定義と初期化
今何回目の処理かをカウントするための変数定義。
i=0で初期化してね。

2. 繰り返し回数の指定
何回処理したいかを指定する。

3. カウンタ加算幅
i++と書くと、カウンタを1つづつ加算するという意味になる。

#4. for文の例

for(let i = 0; i < 3; i++) {
  document.write('for文だよ');
}

結果

>> for文だよ
>> for文だよ
>> for文だよ

#5. 配列を使った繰り返し処理

配列についての記事はこちら

forを使わないで配列の要素をすべて表示すると

let lists = ['山田', '伊藤', '佐藤', '鈴木'];

console.log ( lists[0] );
console.log ( lists[1] );
console.log ( lists[2] );
console.log ( lists[3] );

結果

1. 山田
2. 伊藤
3. 佐藤
4. 鈴木

console.log()を使って表示していますが、同じ処理を6回も繰り返して面倒臭いです。
保守性も低いです。

for文を使うと、、、

let lists = ['山田', '伊藤', '佐藤', '鈴木'];

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

結果

1. 山田
2. 伊藤
3. 佐藤
4. 鈴木

文が短いし、見やすいです。

#6.continue: 特定のタイミングだけ処理を実行

continueを使うと、繰り返し処理の最中に特定のタイミングだけ処理を実行させないようにできる

for文を使って奇数だけを表示するよ

for(let i = 0; i > 10; i++) {
  if(i % 2 === 0) continue; //偶数(2で割れるとき)だけ処理しない
  console.log(i);
}

結果

#7.break: 途中で処理を中断する
breakを使うと、繰り返しの途中で処理を中断できる

for(let i = 0; i > 10; i++) {
  if(i === 7) break; //7以降は中断
  console.log(i);
}

結果

こんな感じ。