JavaScript filterを使って配列の中から条件にマッチするデータを取得する方法

今回はJavaScriptのfilter関数の使い方について解説をしていきます。

filterは配列の中から特定の条件に一致したものを取り出して返してくれるので、

何かを検索する時に便利使える関数になっています。

filterとは？

filter()は、与えられた callback関数を配列の各要素に対して一度ずつ呼び出し、callbackが true と評価される値を返したすべての要素からなる新しい配列を生成します。callback は値が代入されている配列の添字に対してのみ呼び出されます。つまり、すでに削除された添字や、まだ値が代入されていない添字に対しては呼び出されません。callback によるテストに合格しなかった配列要素は単純にスキップされ、新しい配列には含まれないだけです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN

filter() は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。

developer.mozilla.org

簡単に言うと、配列から条件にある値だけを取り出して返してくれる関数になっています。

といったときに使用されます。

filterの記述方法

返り値は、条件に一致した情報のみが返却されます。

配列から特定の条件に一致する値を取り出す方法

今回は、ageが30より大きいデータを取得してくるコードを例に解説をしていきます。

const lists = [
  {
    name: 'tanaka',
    age: 20,
  },
  {
    name: 'sato',
    age: 30,
  },
  {
    name: 'suzuki',
    age: 40,
  }
]

const list = lists.filter(function(item) {
  return item.age > 30
})

item 引数は、配列内の現在の要素を参照するので、今回は lists を参照していることになります。

条件に一致したものを新しい配列に格納し返してくれます。

出力結果

{ age: 40, name: "suzuki" }

配列から特定の文字が含まれる値を取得する方法

indexOfと組み合わせることによって、文字列が含まれるかどうかを判定して返すことによって検索をすることができます。

const filtered = lists.filter(function (item) {
  return item.name.indexOf('tanaka') !== -1
})

出力結果

{ name: 'tanaka', age: 20 }

findを使った検索方法

findを使うことでも配列内から特定の値を取得することができます。

使用方法は基本的にfilterを使う方法と変わりません。

const lists = [
  {
    name: 'tanaka',
    age: 20,
  },
  {
    name: 'sato',
    age: 30,
  },
  {
    name: 'suzuki',
    age: 40,
  }
]

const tanaka = result.find(function (item) {
  return item === 'tanaka'
})

まとめ

• filterの活用方法
  • 配列から特定の情報を取得し、新たな配列を作って返却される
• findを使うことでもfilterと同じような機能を実装できる

おすすめの参考書

確かな力が身につくJavaScript「超」入門 第2版

created by Rinker

• Kindle
• Amazon
• 楽天市場

改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで

created by Rinker

• Kindle
• Amazon
• 楽天市場