Lodashでor検索and検索

JavaScriptのLodashで、JSONの配列からOR検索、AND検索をしてみました。

サンプルは、Vue.jsで表示を制御しています。

光の三原色RGBと、色の三原色CMYを検索項目として、
選択された要素を含んでいる色を表示しています。

See the Pen lodash filter by webdev (@webdev-jp-net) on CodePen.0

ORはintersectionの積集合

intersectionは、第一引数に渡した配列、第二引数に渡した配列の両方に含まれる値を返してくれます。

intersectionに、これらの配列を渡して

  • 検索フォームでチェックが入っている値の配列
  • 一覧の項目が保持している値の配列

返り値が空ではないものを検索結果として残しています。

<br />
return _.intersection(一覧の項目が保持している値の配列, 検索フォームでチェックが入っている値の配列).length<br />

ANDはループ内でincludes判定して絞り込む

mapは、第一引数に渡した配列やオブジェクトの要素数だけループを実行し、実行結果を返してくれます。
includesは、第一引数に渡した配列に、第二引数で渡した値を含んでいるか真偽を返してくれます。

mapで検索フォームでチェックが入っている値だけループして、
includesで一覧の項目が保持している値の配列に値が含まれているか判定し、絞り込んでいます。

<br />
_.map(検索フォームでチェックが入っている値, function(値) {<br />
	if (!_.includes(一覧の項目が保持している値の配列, 値)) valid = false;<br />
});<br />

関連記事