JavaScript 配列 Filter

Pocket

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

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

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

Filterの実行結果 [3,4,5]
Filterの実行結果 [3,4,5]

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

console.log(["ガンダム","ガンキャノン","ガンタンク"].filter(a1 => {
    return (a1 >= "ガンタ")
}))
"ガンタ"でフィルターするとガンダムとガンタンクの2つが出てきた?
“ガンタ”でフィルターするとガンダムとガンタンクの2つが出てきた?

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

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

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

JS 配列フィルターで文字列重複削除
JS 配列フィルターで文字列重複削除

その逆で 重複した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のエレメントをフィルターした配列を返しています。結果は下のようになりました。

配列の要素内mainFlgがtrueの場合だけをフィルター
配列の要素内mainFlgがtrueの場合だけをフィルター

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA