JavaScript 配列 Filter

JavaScriptの配列にはfilterというヘルパーが付いています。filterは、配列内で必要なエレメントだけを抽出することや重複したデータ消してリスト化することもできます。下記は数値[1,2,3,4,5]という配列内の2より大きい数値だけをフィルターしたコード例です。

console.log([1,2,3,4,5].filter(a1 => {
    return (a1 > 2)
}))

SafariのJavaScriptコンソールで実行すると下のように表示されました。

この配列部分をそのままに文字列に置き換えても使えます。

console.log(["ガンダム","ガンキャノン","ガンタンク"].filter(a1 => {
    return (a1 >= "ガンタ")
}))

配列フィルターの１つ目の引数だけを使いましたが配列は3つの引数（value: string, index: number, array: string[]）が使えます。これを使うと重複などの比較も可能です。

console.log(["ガンダム","ガンキャノン","ガンキャノン","ガンキャノン","ガンキャノン"].filter((a1, i1, _my) => {
    return _my.indexOf(a1) === i1
}))

ガンダム1個とガンキャノン4個入っていますが実行すると重複分のガンキャノンが1個になります。

その逆で 重複した4つのガンキャノンだけを取り出すには下のコードです。

console.log(["ガンダム","ガンキャノン","ガンキャノン","ガンキャノン","ガンキャノン"].filter((a1, i1, _my) => {
    return _my.indexOf(a1) !== _my.lastIndexOf(a1)
}))

重複で取り出したガンキャノン4つ_my.lastIndexOf(a1) !== i1を&&し1つに===で1個にもできます。

console.log(["ガンダム","ガンキャノン","ガンキャノン","ガンキャノン","ガンキャノン"].filter((a1, i1, _my) => {
    return _my.indexOf(a1) === i1 && _my.lastIndexOf(a1) !== i1
}))

実行すると[ガンキャノン]1個が表示されます。

配列がJSONなどの構造体の場合にもフィルターは使えます。下記コードはJSON配列を使ったフィルター例です。

console.log([{mobileSuit: "ガンダム", mainFlg: true},{mobileSuit: "ガンキャノン"}].filter(a1 => {
    return a1.mainFlg 
}))

mainFlgがtrueのエレメントをフィルターした配列を返しています。結果は下のようになりました。