見出し画像

JS学習記録第5回 ループ文の使い方について

こんにちは。
今回はJSのループ文についてまとめていこうかなと思います!

ループ文とはいわゆる繰り返し処理のことです。
WordPressをやったことがある人はわかるかと思います。
(while文とかですね。)
JSでのループ文は以下のようにfor文を使うことが多いようです。
(まだよく分からないのですが。。。)
例えば以下の記述があるとします。

const arry =[1,2,3,4,5];

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

スクリーンショット 2021-12-28 17.33.40

こちらがfor文(ループ文)の一般的な記述なのですが、1つずつ見ていきます。
まず、const arry =[1,2,3,4,5];
でarryという変数に数字の1から5までの数字が配列として存在しています。

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

こちらは、
let i = 0; ←iという変数に0を代入し、初期化処理を行っております。
i<arry.length; ←変数iが変数iのlength(配列の数)より大きい場合。
i++ ←iに1を足すという意味。

i++について
i = i+1と同じ意味。プログラミングでは省略するために++と記述します。


上記の処理をまとめると、
変数iが変数arryの配列の数より大きくなるまで1を足していく。
ということになります。

実行結果が0,1,2,3,4なのは、
変数iが配列の添字だからです。(プログラミングでは0から始まるため)
んー、よく分からない。。。



そのため、以下のような記述にすると分かりやすいかもしれません。

const arry =[1,2,3,4,5];

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

スクリーンショット 2021-12-28 17.46.08

console.log(i, arry.[i])と2つの値を記述しました。
出力結果を確認しますと、
左側が変数i、
右側が変数arryの配列を意味します。

配列の中身をそのまま持って来るときはarry.[i]ですね!

こうするとより分かりやすいかもしれません!

const arry =['東京','大阪','北海道','福岡','沖縄'];

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

スクリーンショット 2021-12-28 17.53.52

今回はJSの基本的なループ処理についてまとめてみました。
学習しているときに、2回ほど無限ループに引っかかりパソコンのファンが回りっぱなしでした_:(´ཀ`」 ∠):
気をつけたいですね。。。

もし無限ループにハマったたら、
macだとcommand + option + escで強制終了ができます!
でもパソコンにとっては負担なので無限ループには気をつけましょう!





大阪在住の29歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。