前回は for
, while
, do-while
の3つのループ構文について説明しました。今回は以下の3つについて説明したいと思います。
- for-in
- for-of
- Array 型の forEach メソッド (Array.prototype.forEach)
for-in
オブジェクトのキーをループしたい場合に便利です。
const obj = {
'a': 'A',
'b': 'B',
'c': 'C'
};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key + ' -> ' + obj[key]);
}
}
// a -> A
// b -> B
// c -> C
通常の for 文と違い、オブジェクトのキーを表す変数を宣言 in オブジェクト
という形を取ります。
ここで注意が必要なのは、「Object.prototype
を拡張した場合、拡張したプロパティも一緒に取得してしまう」という点です。
Object.prototype.foo = 'bar';
const obj = {
'a': 'A',
'b': 'B',
'c': 'C'
};
for (let key in obj) {
console.log(key + ' -> ' + obj[key]);
}
// a -> A
// b -> B
// c -> C
// foo -> bar
これを避けるためには以下のような方法を取る必要があります。
hasOwnProperty
を使ってキーを検査する (最初の例)Object.keys
を使ってキーの配列を取得し、Array.prototype.forEach
に渡す
前者の方法は最初に示した例です。後者の方法は別の機会に紹介したいと思います。
追記:こちらの記事に書きました。
for-of
配列をループしたい場合に便利です。
const arr = ['a', 'b', 'c'];
for (let el of arr) {
console.log(el);
}
// a
// b
// c
構文は for-in と似ていて、 配列の要素を表す変数を宣言 of 配列
という形を取ります。
配列の要素すべてをループしたい場合に使いますが、次の Array 型の forEach メソッドを使うほうが一般的です。
Array 型の forEach メソッド (Array.prototype.forEach)
for-of と同様、配列をループしたい場合に便利です。for-of よりもこちらの方が好んで使われる場合が多いように思います。
const arr = ['a', 'b', 'c'];
arr.forEach(el => console.log(el));
// a
// b
// c
引数にコールバック関数をとり、コールバック関数の引数として配列の要素が渡されます。上記例の場合、コールバック関数は3回呼ばれます。
また、コールバック関数に渡される引数は配列の要素だけではありません。
- 配列の要素
- インデックス
- 配列
const arr = ['a', 'b', 'c'];
arr.forEach((el, i, array) => console.log(el, i, array.toString()));
// a 0 a,b,c
// b 1 a,b,c
// c 2 a,b,c
まとめ
配列・オブジェクトをループする方法として for-in, for-of, Array 型の forEach メソッドについて書いてみました。
Array 型の forEach メソッドは汎用性が高く、また Array 型にはコールバック関数を渡す便利な関数がいくつかあるため、この形に慣れておくことをおすすめします。