JavaScriptで配列の中から検索した値を取得・削除するfilterの使い方

JavaScriptで配列の要素を検索し、取得や削除を行えるfilter関数の使い方を解説します。

配列から条件で検索し、取得できるfilter関数の使い方

.filter()関数では、配列から検索してヒットした値を取得できます。

検索して見つからない場合は空の配列が返ります。

検索して取得に成功

サンプルコード
var array = [100, 200, 300, 400, 500];

//300以上のみ取得
var aryCheck = array.filter(value => value >= 300);

console.log(aryCheck);

ない場合は空の配列が返る

サンプルコード
var array = [100, 200, 300, 400, 500];

//700以上のみ取得(存在しないため空の配列が返る)
var aryCheck = array.filter(value => value >= 700);

console.log(aryCheck);

検索と言っていますが、配列から設定した条件のものを削除したい、といった場合でも有効です。

filterとfindの違い

似た関数としてfind()という関数もあります。

JavaScriptで配列から値を検索し、取得や判定ができるfindの使い方
JavaScriptで配列から値を検索して取得や判定を行うことが出来る関数.findの使い方をサンプルコードでまとめました。
  • filter : 検索してヒットしたものを配列で返す
  • find : 検索して最初にヒットした値を返す

filterは検索してヒットしたものを配列として返すので、例えばヒットした値を複数取得したい場合はfilterを使用しましょう。

「ただ値の有無が知りたい」というだけの場合でもfilterは有用ですが、その場合はfindでも良いでしょう。

filterで複数条件から検索する方法

filterは複数の条件を設定することが出来ます。

ただし、1行で省略した書き方ですと条件の数次第では見づらくなるので、{}で展開して複数行書けるようにすると見やすくなります。

valueには配列の値が入り、条件を満たした値の場合はtrueを返すようにしましょう。

サンプルコード
var array = [100, 200, 300, 400, 500, 11, 22, 33, 44, 55, 111, 222, 333, 444, 555];

//300未満かつ奇数の値を取得
var aryCheck = array.filter(value => {
    if(300 > value && value % 2 !== 0){
        return true;
    }
});

console.log(aryCheck);

filterで連想配列(オブジェクト)から検索する方法

オブジェクト入り配列の連想配列でも、filterによる取得・削除が出来ます。

サンプルコード
var array = [
    {no : 1, name : 'Apple', price: 50},
    {no : 2, name : 'Banana', price: 80},
    {no : 3, name : 'Cherry', price: 50},
    {no : 4, name : 'Orange', price: 60},
    {no : 5, name : 'Melon', price: 100},
];

//priceが80以上を取得
var aryCheck = array.filter(value => {
    if(value.price >= 80){
        return true;
    }
});

console.log(aryCheck);

filterで一致する文字列を取得する検索

文字列を部分一致、前方一致、後方一致で取得したい場合は、filterの条件でmatch関数を使用します。

部分一致(特定の文字列を含む)

サンプルコード
var array = ['fuga', 'hoge', 'piyo', 'yoga'];

//配列から"og"と書かれた値を取得する
var aryCheck = array.filter(value => value.match(/og/g));

console.log(aryCheck);

前方一致で検索

サンプルコード
var array = ['fuga', 'hoge', 'piyo', 'yoga'];

//先頭がpiから始まる文字の値を配列内で検索し、新たな配列を生成
var aryCheck = array.filter(value => value.match(/^pi/g));

console.log(aryCheck);

後方一致で検索

サンプルコード
var array = ['fuga', 'hoge', 'piyo', 'yoga'];

//後方がgaで終わる文字の値を配列内で検索し、新たな配列を生成
var aryCheck = array.filter(value => value.match(/ga$/g));

console.log(aryCheck);

以上、JavaScriptで配列の中から検索した値を取得・削除するfilterの使い方、でした。

コメント

タイトルとURLをコピーしました