filterメソッド

filterメソッドは、配列の要素をフィルタリングし、 特定の条件に合う要素だけを残すことを可能にします。 このメソッドはパラメータとして関数を受け取り、 その関数が配列の各要素に対して実行されます。 このメソッドは、渡された関数がtrueを返した 要素だけを含む新しい配列を返します。

関数には3つのパラメータを渡すことができます。 これらのパラメータが存在する場合(これらは必須ではありません)、 1番目には自動的に配列の要素が、 2番目にはその要素の配列内での番号(インデックス)が、 3番目には配列自体が渡されます。

構文

javascriptlet 新しい配列 = 配列.filter(function(要素, インデックス, 配列) {
  コード
  return true または false
});

例

配列をフィルタリングして、正の数のみを残してみましょう:

javascriptlet arr = [-2, 5, 1, -5, -1, 1, 3, 4, -1];

let res = arr.filter(function(elem) {
  if (elem >= 0) {
    return true;
  } else {
    return false;
  }
});

console.log(res);

コードの実行結果:

javascript[5, 1, 1, 3, 4]

例

アロー関数を 利用してコードを短縮しましょう:

javascriptlet arr = [-2, 5, 1, -5, -1, 1, 3, 4, -1];

let res = arr.filter(elem => {
  if (elem >= 0) {
    return true;
  } else {
    return false;
  }
});

console.log(res);

コードの実行結果:

javascript[5, 1, 1, 3, 4]

例

論理演算子の短絡評価を 利用してコードを短縮しましょう:

javascriptlet arr = [-2, 5, 1, -5, -1, 1, 3, 4, -1];

let res = arr.filter(elem => {
  return elem >= 0;
});

console.log(res);

コードの実行結果:

javascript[5, 1, 1, 3, 4]

例

アロー関数の特性を利用してコードを短縮しましょう:

javascriptlet arr = [-2, 5, 1, -5, -1, 1, 3, 4, -1];
let res = arr.filter(elem => elem > 0);

console.log(res);

コードの実行結果:

javascript[5, 1, 1, 3, 4]

例

必要に応じて、3番目のパラメータに配列自体を渡すことができます:

javascriptlet res = arr.filter(function(elem, index, arr) {
  ここで配列arrにアクセス可能
});

関連項目

  • メソッド map と forEach,
    これらは配列の各要素に関数を適用することを可能にします
  • メソッド some と every,
    配列のチェックを実行します
  • メソッド reduce と reduceRight,
    配列を単一の値に畳み込みます