Table of Contents

URL: https://www.progressiverobot.com/js-filter-array-method-ja/

はじめに

配列のfilter()メソッドは、既存の配列から指定された条件に該当する要素を持つ新しい配列を作成します。

				
					
var numbers = [1, 3, 6, 8, 11];



var lucky = numbers.filter(function(number) {

  return number > 7;

});



// [ 8, 11 ]

上記の例では、numbers配列を取得し、7より大きい値のみを含むフィルターされた新しい配列を返します。

フィルター構文

filter illustration for: フィルター構文 
				
					
var newArray = array.filter(function(item) {

  return condition;

});

<^>item<^> 引数は、配列内の現在の要素を参照し、filter() はこの要素と<^>condition<^>を比較してチェックします。これは、オブジェクトの場合にプロパティにアクセスするのに役立ちます。

現在の<^>item<^> が条件を満たすと、新しい配列に送信されます。

オブジェクトの配列をフィルタリングする

.filter() の一般的な使用例として、プロパティを使用するオブジェクトの配列があります。

				
					
var heroes = [

    {name: “Batman”, franchise: “DC”},

    {name: “Ironman”, franchise: “Marvel”},

    {name: “Thor”, franchise: “Marvel”},

    {name: “Superman”, franchise: “DC”}

];



var marvelHeroes =  heroes.filter(function(hero) {

    return hero.franchise == “Marvel”;

});



// [ {name: “Ironman”, franchise: “Marvel”}, {name: “Thor”, franchise: “Marvel”} ]

関連資料

filter() の詳細については、MDNリファレンスを参照してください。

Filterは、JavaScriptでの配列のいくつかの反復メソッドの1つにすぎません。JavaScriptのArray反復メソッドの使用方法を読んで、map() および reduce()などの他のメソッドについて学ぶことができます。