配列のループ方法まとめ

備忘用にJavaScriptでの配列のループ（繰り返し）方法について簡単にまとめました。

オブジェクトのループ方法は下記のリンクにまとめています。

for文
- for
- for…in
- for…of
.forEach()

for文

for

配列の数（length）だけループさせる。

const animal = ['イヌ', 'サル', 'キジ'];

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

実行結果

// 'イヌ'
// 'サル'
// 'キジ'

breakeで処理を止める

インデックスが3になったときに止める場合は次のように「break」を書く。

const animal = ['イヌ', 'サル', 'キジ', 'ウサギ'];

for (let i = 0; i < animal.length; i++) {
  if (i === 3) break;
  console.log(animal[i]);
}

実行結果

// 'イヌ'
// 'サル'
// 'キジ'

continueで処理をスキップ

インデックスが3になったときにスキップする場合は次のように「continue」を書く。

const animal = ['イヌ', 'サル', 'キジ', 'ウサギ'];

for (let i = 0; i < animal.length; i++) {
  if (i === 3) continue;
  console.log(animal[i]);
}

実行結果

// 'イヌ'
// 'サル'
// 'キジ'

breakと同じ結果ですが、処理内容が異なります。

breakとcontinueの違い

break：if文から抜ける
continue：if文を抜けずにスキップして次の処理に進む

for…in

配列のインデックスを取得できる。
インデックスの番号順に取得できる保証はないので注意（ECMAScriptの規定でそうなっている）。

const animal = ['イヌ', 'サル', 'キジ'];

for(let i in animal) {
    console.log(animal[i]);
}

実行結果

// 'イヌ'
// 'サル'
// 'キジ'

for…of

IEに非対応で、Edgeには対応。

const animal = ['イヌ', 'サル', 'キジ'];

for( let name of animal ){
  console.log(name);
}

実行結果

// 'イヌ'
// 'サル'
// 'キジ'

インデックスも同時に取得

entries() メソッドを使用するとインデックスも同時に取得できる。

const animal = ['イヌ', 'サル', 'キジ'];

for( let [index, name] of animal.entries() ){
  console.log(index, name);
}

実行結果

// 0 'イヌ'
// 1 'サル'
// 2 'キジ'

.forEach()

第一引数（str）で要素を取得し、第二引数でインデックスを取得する。

例１）単純な配列

const animal = ['イヌ', 'サル', 'キジ'];

animal.forEach(function(str, i) {
  console.log(str, i);
});

実行結果

// 'イヌ'
// 'サル'
// 'キジ'

例２）配列内にオブジェクト

const animal = [
  { name:'イヌ', age: 4},
  { name:'サル', age: 3},
  { name:'キジ', age: 6},
];

animal.forEach(function(obj, i) {
  console.log(obj.name, obj.age);
});

実行結果

// 'イヌ' 4
// 'サル' 3
// 'キジ' 6

returnで処理をスキップ

.forEach()で処理をスキップする場合は「continue」ではなく「return」を使用。

const animal = ['イヌ', 'サル', 'キジ'];

animal.forEach(function(str, i) {
  if (i === 3) continue;
  console.log(animal[i]);
});

実行結果

// 'イヌ'
// 'サル'
// 'キジ'

breakは使用できない

先述したfor文のループで使用したif文の「break」は使えません。
.forEach()のループからは抜けることはできないので注意が必要。