配列の要素を順に取得する

Array オブジェクトの forEach メソッドを使うと配列に含まれる要素を順に取り出しコールバック関数へ渡して処理を行うことができます。ここでは JavaScript で配列の要素を順に取得する方法について解説します。

(Last modified: )

forEachメソッドの使い方

Array オブジェクトの forEach メソッドを使うと配列に含まれる要素を順に取り出し、記述したコールバック関数渡して処理することができます。書式は次の通りです。 

配列名.forEach( コールバック関数(要素の値) )
配列名.forEach( コールバック関数(要素の値, 要素のインデックス) )
配列名.forEach( コールバック関数(要素の値, 要素のインデックス, 配列) )

forEach メソッドは配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出します。コールバック関数は、現在取り出されている要素の値、要素のインデックス、そして配列そのものを引数にして呼び出されます。引数の要素のインデックスおよび配列は必要なければ省略可能です。

次のサンプルをみてください。 

let fruit = ['Apple', 'Melon', 'Orange'];

fruit.forEach(function(element){
  console.log(element);
});

>> Apple
>> Melon
>> Orange

配列に含まれる要素の値である 'Apple', 'Melon', 'Orange' を順に取り出し forEach メソッドの引数に記述したコールバック関数を呼び出しています。なおコールバック関数はアロー関数式を使って次のように記述することもできます。(アロー関数式については「アロー関数式を使って関数を定義する」を参照されてください)。 

let fruit = ['Apple', 'Melon', 'Orange'];

fruit.forEach(element => console.log(element));

>> Apple
>> Melon
>> Orange

要素に値に加えて要素のインデックスや配列をコールバック関数の引数として受け取って処理する場合は次のようになります。 

let fruit = ['Apple', 'Melon', 'Orange'];

fruit.forEach(function(element, index, array){
  console.log('Index:' + index);
  console.log('Element:' + element);
  console.log('Array:' + array);
});

>> Index:0
>> Element:Apple
>> Array:Apple,Melon,Orange
>> Index:1
>> Element:Melon
>> Array:Apple,Melon,Orange
>> Index:2
>> Element:Orange
>> Array:Apple,Melon,Orange

配列の繰り返し処理におけるforEachメソッドとfor文の違い

配列の要素を順に取り出して処理する方法として forEach メソッドを使う以外に for 文や for...of を使うこともできます。

最初に forEach メソッドを使用する場合は次のように記述しました。 

let alpha = ['A', 'B', 'C'];

alpha.forEach(function(element){
  console.log(element);
});

>> A
>> B
>> C

for 文を使う場合はインデックスを繰り返し処理で変化させて配列の要素を順に参照して処理します。 

let alpha = ['A', 'B', 'C'];

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

>> A
>> B
>> C

for...of 文を配列に対して使用すると、配列の要素を順に取り出して変数に格納します。 

let alpha = ['A', 'B', 'C'];

for (let element of alpha){
  console.log(element);
}

>> A
>> B
>> C

いずれの形式でも同じ結果となります。

ただし配列の要素のインデックスが連続しておらず、途中に存在しない要素がある場合には異なった結果となります。 forEach メソッドは存在しない要素に対しては何も行われないのに対して for 文では存在しない要素に対しても同じように処理を行います。 

let alpha = ['A', 'B', , , 'C'];

alpha.forEach(function(element){
  console.log(element);
});
>> A
>> B
>> C

for (let i = 0 ; i < alpha.length ; i++){
  console.log(alpha[i]);
}
>> A
>> B
>> undefined
>> undefined
>> C

for (let element of alpha){
  console.log(element);
}
>> A
>> B
>> undefined
>> undefined
>> C

なお forEach メソッドを使用している場合は break 文が使用できないため繰り返し処理を途中で止めることはできません。 for 文または for...of 文の場合は break 文を使用することで繰り返し処理を途中で終了させることができます。( break 文については「break文の使い方」を参照されてください)。

次のサンプルは for...of 文の中で break 文を使用しています。 

let alpha = ['A', 'B', , , 'C'];

for (let element of alpha){
  console.log(element);
  if (element === 'B'){
    console.log('End');
    break;
  }
}
>> A
>> B
>> End

利用される用途に応じて配列に対する繰り返し処理の方法を選択されてください。

-- --

JavaScript で配列の要素を順に取得する方法について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。