JavaScript
前回、JavaScriptの配列（Array)を勉強しました。
今回は繰り返し処理で使用するfor文を勉強していきます。
それでは始めていきましょう。
for文の基礎
JavaScriptでのfor文の基本的な使い方としては「for(初期値; 繰り返し条件; 変化式){処理}」となります。
例えば0から4までを数え上げる場合このようになります。
for(let i = 0; i < 5; i++){
console.log(i)
}
実行結果
0
1
2
3
4「let i = 0」で変数iを初期値0として宣言します。
そして「i < 5」つまり、その変数iが5未満の間は繰り返されます。
ただし、このままでは変数iが繰り返しのたびにどう変化するのか分からないため、最後に「i++」、つまりiに1を足すという変化式が書かれています。
そして「{}（波括弧）」内に書かれた部分が繰り返し処理されるというわけです。
ちなみに「i++」のところは「i = i + 1」と書いても問題ありません。
for(let i = 0; i < 5; i = i + 1){
console.log(i)
}
実行結果
0
1
2
3
4また変数の宣言ですが、色々見てみると「let」か「var」を使っているところが多かったです。
しかし前々回勉強した通りletで宣言すると再宣言ができません。
このfor文で宣言した場合も再宣言ができないのか試してみましょう。
for(let i = 0; i < 5; i++){
console.log(i)
}
let i = 10;
console.log(i);
実行結果
0
1
2
3
4
10問題なく処理されました。
つまりletでの変数の宣言はブロック内（今回であればfor文の中）だけ有効であり、その外で再度同じ変数名を宣言することは問題ないということです。
ただ変数の宣言の時でもお話ししましたが、変数の宣言はなるべくconstを使うのがいいらしいです。
なぜそのようになっていなかったのか分かりませんが、ここら辺は自分が実際プログラムを書いてみて分かることなのかもしれません。
とりあえず変数を宣言するときは「const」をメインと頭に入れておきます。
配列を使ったfor文
先ほどは数値を使って繰り返し処理しましたが、配列から一つずつ要素を取得して処理をすることも可能です。
その場合は「for(変数の宣言 of リスト名){処理}」です。
var abc = ['a', 'b', 'c', 'd', 'e']
for(const elem of abc){
console.log(elem)
}
実行結果
a
b
c
d
eここで気になるのは「const」を使うと再宣言、再代入ができません。
for文の中で宣言した場合、その後で再宣言するとどうなるのか試してみましょう。
var abc = ['a', 'b', 'c', 'd', 'e']
for(const elem of abc){
console.log(elem)
}
const elem = 'f';
console.log(elem)
実行結果
a
b
c
d
e
fこれも問題なく処理できたため、for文内のconstで宣言した変数名はfor文外には影響しないようです。
またconstの場合は再代入できないのですが、for文で繰り返し処理することに対しては再代入にも再宣言にも当たらないようです。
その仕組みはよく分かりませんが、とりあえずはそういうものだと理解しておきます。
要素とインデックスを同時に取得：forEach
要素とインデックスを同時に取得するには「forEach」を使用します。
使用方法としては「配列名.forEach(function(要素の変数名, インデックスの変数名)){処理}」となります。
var abc = ['a', 'b', 'c', 'd', 'e']
abc.forEach(function(elem, index){
console.log(elem + ':' + index)
})
実行結果
a:0
b:1
c:2
d:3
e:4ofを使わずに配列の要素を取得
先ほどの「of」を使わずに配列の要素を取得するには、配列のインデックスを使ってfor文で繰り返し処理をします。
その場合は配列の要素数を繰り返し条件に入れてやります。
var abc = ['a', 'b', 'c', 'd', 'e']
for(let i = 0; i < abc.length; i++){
console.log(abc[i])
}
実行結果
a
b
c
d
eこの方法を使うと複数の配列を同時に処理することも可能になります。
var abc = ['a', 'b', 'c', 'd', 'e']
var num = [10, 20, 30, 40, 50]
for(let i = 0; i < abc.length; i++){
console.log(abc[i] + ':' + num[i])
}
実行結果
a:10
b:20
c:30
d:40
e:50ただし気をつけるべきは繰り返し条件はあくまでも指定された繰り返し条件に沿うということです。
例えばこちらの例では繰り返し条件は「i < abc.length」となっており、配列abcの長さまで繰り返されます。
そのため配列numの最後の2つは処理されません。
var abc = ['a', 'b', 'c', 'd', 'e']
var num = [10, 20, 30, 40, 50, 60, 70]
for(let i = 0; i < abc.length; i++){
console.log(abc[i] + ':' + num[i])
}
実行結果
a:10
b:20
c:30
d:40
e:50逆に繰り返し条件を「i < num.length」と長い方にした場合、配列abcで最後に足りない2つは「undefined」となります。
var abc = ['a', 'b', 'c', 'd', 'e']
var num = [10, 20, 30, 40, 50, 60, 70]
for(let i = 0; i < num.length; i++){
console.log(abc[i] + ':' + num[i])
}
実行結果
a:10
b:20
c:30
d:40
e:50
undefined:60
undefined:70それなら繰り返し条件を2つ書けばいいだろうと「i < abc.length, i < num.lengt」としても繰り返し条件として使われるのは最後の１つで、この場合はでは「i < num.length」のみとなります。
var abc = ['a', 'b', 'c', 'd', 'e']
var num = [10, 20, 30, 40, 50, 60, 70]
for(let i = 0; i < abc.length, i < num.length; i++){
console.log(abc[i] + ':' + num[i])
}
実行結果
a:10
b:20
c:30
d:40
e:50
undefined:60
undefined:70この複数の条件を同時に満たす、もしくはどちらか一方を満たすなどを繰り返し条件とするには論理演算子というものが必要になりますが、とりあえず今回はここまでとします。
複数の数値を同時に繰り返し処理する方法
先ほどは複数の配列を同時に繰り返し処理する方法でしたが、複数の数値を繰り返し処理する方法もあります。
この場合「for(初期値1, 初期値2…; 繰り返し条件; 変化式1, 変化式2…){処理}」となります。
for(let i = 0, j = 10; i < 5; i++, j ++){
console.log(i + ':' + j)
}
実行結果
0:10
1:11
2:12
3:13
4:14繰り返し条件は1つですが、初期値と変化式はいくつでも追加できるようです。
なかなかPythonと違うところが多いfor文ですが、この違いは慣れていくしかないことでしょう。
次回はJavaScriptの条件分岐if文を勉強していくことにしましょう。
ではでは今回はこんな感じで。
コメント