配列の要素の中で条件を満たした要素だけを集めて新しい配列を作成する

配列に含まれる要素に対して、コールバック関数を使って条件を満たしているかどうか判別し、満たしている要素だけを集めて新しい配列を作成することができます。例えば指定した数値以上の要素だけからなる新しい配列を作成する、といったことができます。ここでは JavaScript で配列の要素の中で条件を満たした要素だけを集めて新しい配列を作成する方法について解説します。

(Last modified: 2024-09-04)

条件を満たす要素から新しい配列を作成する(filterメソッド)

Array オブジェクトの filter メソッドを使うと、配列に含まれる要素に対して条件を満たす要素だけを集めた新しい配列を作成することができます。書式は次の通りです。

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

filter メソッドは配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出します。コールバック関数は、現在取り出されている要素の値、要素のインデックス、そして配列そのものを引数にして呼び出されます。コールバック関数の中では要素に対して条件判定を行い、コールバック関数が true を返した場合は新しい配列に追加し、 false を返した場合は配列に追加しません。そうして作成した新しい配列を filter メソッドの戻り値として返します。

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

let result = [48, 75, 92, 61, 54, 83, 76];
let filterResult = result.filter(function(element){
  return element > 70;
});

console.log(filterResult);
>> [75, 92, 83, 76]

console.log(result);
>> [48, 75, 92, 61, 54, 83, 76]

filter メソッドの引数として記述したコールバック関数の中で、引数として受け取った要素の値が 70 よりも大きい場合は true そうでない場合は false を帰しています。すべての要素に対して順番にコールバック関数を呼び出したあと、 true を返した要素が含まれる新しい配列を作成して filter メソッドの戻り値として返しています。

filter メソッドは元の配列には何も行わないので元の配列は変更されていません。

なおコールバック関数はアロー関数式を使って次のように記述することもできます。(アロー関数式については「アロー関数式を使って関数を定義する」を参照されてください)。

let result = [48, 75, 92, 61, 54, 83, 76];
let filterResult = result.filter(element => element > 70);

console.log(filterResult);
>> [75, 92, 83, 76]

console.log(result);
>> [48, 75, 92, 61, 54, 83, 76]

-- --

JavaScript で配列の要素の中で条件を満たした要素だけを集めて新しい配列を作成する方法について解説しました。

著者 / TATSUO IKURA

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