for...ofループ
ループ処理の中でfor...ofというものがあります。
for...of・・・配列の要素を順番に処理することができます。（列挙可能なオブジェクトに使える）
※Internet Explorerでは使えないのでご注意ください。
構文は下記のようになります。
for (変数 of 列挙可能なオブジェクト) {
// 処理の内容
}
ではサンプルを書いてみます。
下記の配列を順番に並べるようにしてみます。
const subreddits = [
'cooking',
'books',
'chickens',
'life',
'pics',
'soccer',
'movies',
];
for...ofを使うと、
for (let subreddit of subreddits) {
console.log(subreddit);
}
出力結果
// cooking
// books
// chickens
// life
// pics
// soccer
// movies
こうなります。
for文を使った場合
for (let i = 0; i < subreddits.length; i++) {
console.log(subreddits[i]);
}
比べてみると、記述量も減り、見やすくなっているのがわかると思います。
「列挙可能なオブジェクト」についても簡単に説明します。
列挙可能なオブジェクト・・・順番に処理する能力を持っているオブジェクトみたいな捉え方で大丈夫です。
配列はもちろんこれに含むのですが、これ以外にもStringが当てはまります。
サンプルとして書いてみます。
出力結果はこうなります。
これはStringが列挙可能なオブジェクトだからできるものになります。
基本的に構文の「列挙可能なオブジェクト」のところは配列で使うことが多いので、配列以外も入れれることができることは覚えておいてください。
for...in との違い・・・
for...in は指定された連想配列（オブジェクト）から要素を取り出して先頭から順番に処理します。
サンプル書いてみます。
const crew = {
name: 'Luffy',
age: '19',
birthplace: 'EAST BLUE'
}
for(let c in crew){
console.log(c);
}
出力結果
//name
//age
//birthplace
あくまでも出力されるのはキーであり、バリューではないです。
バリューも出力したい場合は
for(let x in crew){
console.log(crew[x]);
}
出力結果
// Luffy
// 19
// EAST BLUE
こうなります。
for...ofについて解説しました。
