JavaScriptのループ処理について備忘録としてまとめておきます。
Javascriptのループ処理
- for文
- for...in文
- for...of文
- while文
- do...while文
- 高階関数によるループ
for文
for (初期化式; 条件式; 加(減)算式)
はじめに初期化式を書きます。その次にループを抜けるための条件を書き、最後に加（減）算をします。
const names = ["太郎", "次郎", "三郎"];
for (let i = 0; i < names.length; i++) {
console.log(names[i]);
}
/* => "太郎"
"次郎"
"三郎"
*/
ちなみに式を全て省略した書き方をすることもできます。この場合breakを書かないと無限ループになるので気をつけましょう。
const names = ["太郎", "次郎", "三郎"];
let i = 0;
for (;;) {
if (i >= names.length) break; // もしiがnamesの要素数以上だったら処理を抜ける。
console.log(names[i]);
i++;
}
/* => "太郎"
"次郎"
"三郎"
*/
for...in文
for...inはそれぞれの要素に対して反復処理を行います。
for (変数 in オブジェクト) {
処理
}
配列
const names = ["太郎", "次郎", "三郎"];
for (let i in names) {
// iにはインデックス番号が入る
console.log(names[i]);
}
/* => "太郎"
"次郎"
"三郎"
*/
オブジェクト
const obj = {name: "太郎", age: 20, gender: "male"};
for (let i in obj) {
// iにはキーが入る
console.log(obj[i]);
}
/* => 太郎
20
male
*/
for...of文
for...ofは値に対して反復処理されます。
for (変数 of オブジェクト) {
処理
}
配列
const names = ["太郎", "次郎", "三郎"];
for (let i of names) {
// iにはそれぞれの値が入る
console.log(i);
}
/* => "太郎"
"次郎"
"三郎"
*/
オブジェクトの場合はObject.keys()で配列に変換にしてから処理をします。
const obj = {name: "太郎", age: 20, gender: "male"};
const keys = Object.keys(obj);
// keysは["name", "age", "gender"]
for (let i of keys) {
// iにはそれぞれのキーが入る
console.log(obj[i]);
}
/* => 太郎
20
male
*/
while文
while文は形こそ違いますがやっていることはfor文と一緒です。
初期化式
while (条件式) {
加(減)算式
}
条件式がtrueの場合反復処理を行うのでwhile文の中で条件をfalseにするための処理（今回はiをカウントアップ）しないと無限ループになるので気をつけましょう。
const names = ["太郎", "次郎", "三郎"];
let i = 0;
while (i < names.length) {
console.log(names[i]);
i++;
}
/* => "太郎"
"次郎"
"三郎"
*/
do...while文
do...while文は必ず最初の処理は実行され、その後は条件によって実行したい場合に使われます。
do {
処理
} while (条件式);
doの間は実行されるので0番目の要素の太郎が出力されます。その後は条件式がfalseなので実行されません。
const names = ["太郎", "次郎", "三郎"];
let i = 0;
do {
console.log(names[i]);
} while (i < 0);
// => 太郎
高階関数
高階関数とは、引数に関数を取るもの、もしくは関数を返り値として返すもののことを言います。
代表的な高階関数
- forEach
- map
- filter
- sort
- reduce
forEach
forEachは引数にとった関数を各要素に対して繰り返します。返り値はundefinedを返します。
const names = ["太郎", "次郎", "三郎"];
names.forEach(function(name) {
console.log(name);
});
/* => "太郎"
"次郎"
"三郎"
*/
map
map()はforEach()と出力結果は同じですが返り値に関数を実行した結果を返します。返り値の配列を別に使いたい時に使用します。
const names = ["太郎", "次郎", "三郎"];
let newName = names.map(function(name) {
console.log(name);
return name + "さん";
});
/* => "太郎"
"次郎"
"三郎"
*/
console.log(newName); // => (3) ["太郎さん", "次郎さん", "三郎さん"]
// forEachの場合はundefined
filter
filter()は関数に与えられた条件に合致したものを新しい配列として返します。
const languages = ["JavaScript", "Ruby", "Go"];
let newName = languages.filter(function(lang) {
return lang.length > 3;
});
console.log(newName); // => (2) ["JavaScript", "Ruby"]
sort
sort()は要素を昇順・降順に並べたりする際に使用します。
const nums = [4, 2, 5, 1, 3];
nums.sort(function (a, b) {
return a - b;
});
console.log(nums); // => (5) [1, 2, 3, 4, 5]
reduce
reduce()は配列の各要素に対して関数を実行し、最終的に単一の値を返します。
const nums = [1, 2, 3, 4];
let newNums = nums.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
});
console.log(newNums); // => 10
これは少しイメージしにくいので順を追って説明します。
まず最初の呼び出しで第１引数であるaccumulatorには0が、第２引数であるcurrentValueには最初の要素の値である1が入っています。
nums.reduce(function(0, 1) {
return 0 + 1;
});
その返り値をaccumulatorが受け取ります。するとaccumulatorが1、currentValueは配列の次の値の2になります。
nums.reduce(function(1, 2) {
return 1 + 2;
});
次はaccumulatorが3、currentValueも3になります。このように続けていくと最終的にaccumulatorが6、currentValueが4になりますので最終的に10が返されnewNumsの出力が10になります。
const nums = [1, 2, 3, 4];
let newNums = nums.reduce(function(accumulator, currentValue) {
return accumulator + currentValue; // 6 + 4
});
console.log(newNums); // => 10
最後に
JavaScriptのループ処理についてまとめてみました。
ループ処理は今どのような値が入っているのかを調べていくと理解が深まると思います。
MDN等を参照して手を動かしながら理解していきましょう。