はじめに

今回は、JavaScriptのfilter()について学んだことをまとめておきたいと思います。

filter()の基本構文の説明後、タイトルのサンプルコードを紹介します。

目次

1.filterメソッドとは
 2.本題
 3.参考記事

1. filterメソッドとは

filter()は、配列の要素を絞り込み、処理結果を新しい配列として返すメソッドです。
基本構文は以下のようになっています。

基本構文

配列データ.filter(( value, index, array ) => {
   // 絞り込むための条件を記載
})

コールバック関数の中では絞込みたい条件を記載し、true を返した場合のみ新しい配列に追加します。

コールバック関数の引数には

第１引数：現在処理されている要素の値
第２引数：現在処理されている要素の配列内におけるインデックス（省略可）
第３引数：現在処理している配列（省略可）

の３つを渡すことができます。

サンプルコード

const nums = [12, 71, 43, 38, 50];
const filteredNums = nums.filter(function(value){
  return value > 40;
});

console.log(filteredNums);
// [71, 43, 50]

console.log(nums);
// [12, 71, 43, 38, 50]

上記の結果から、元の配列には手を加えずに、新しい配列が返り値となっていることが分かります。

2. 本題

hobbyがgameであるという条件で絞り込みを行いました。

filterメソッドで連想配列を指定条件で絞り込む

const users = [
  {'id': 1, 'hobby': 'game'},
  {'id': 2, 'hobby': 'game'},
  {'id': 3, 'hobby': 'camp'},
  {'id': 4, 'hobby': 'climbing'},
  {'id': 5, 'hobby': 'game'}
]
const filteredusers = users.filter(user => user.hobby === 'game')
console.log(filteredusers)
/*
[
  {'id': 1, 'hobby': 'game'},
  {'id': 2, 'hobby': 'game'},
  {'id': 5, 'hobby': 'game'}
]
*/

以上で実装完了です。

シンプルに書くことができるので、新しい配列を作成する際などにうまく活用していきたいと思います。

3. 参考文献