序章
filter() Arrayメソッドは、既存の配列の特定の基準に該当する要素を含む新しい配列を作成します。
この記事では、filter()配列メソッドについて学習します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- JavaScriptアレイにある程度精通していること。
- JavaScript関数にある程度精通していること。
数値の配列でfilter()を使用する
filter()の構文は次のようになります。
var newArray = array.filter(function(item) {
return condition;
});
item引数は、filter()がconditionに対してチェックするため、配列内の現在の要素への参照です。 これは、オブジェクトの場合にプロパティにアクセスするのに役立ちます。
現在のitemがconditionを通過すると、新しいアレイに戻されます。
この数字の配列の例を考えてみましょう。
var numbers = [1, 3, 6, 8, 11];
次に、filter()を適用して、7より大きいすべての数値を返します。
var greaterThanSeven = numbers.filter(function(number) {
return number > 7;
});
console.log(greaterThanSeven);
このコードは、新しいフィルター処理された配列を生成します。
output[8, 11]
7より大きい2つの値を持つ配列が返されます。
オブジェクトの配列でのfilter()の使用
filter()の一般的な使用例は、プロパティを介したオブジェクトの配列です。
creatureオブジェクトの次の配列例について考えてみます。
var creatures = [
{name: "Shark", habitat: "Ocean"},
{name: "Whale", habitat: "Ocean"},
{name: "Lion", habitat: "Savanna"},
{name: "Monkey", habitat: "Jungle"}
];
次に、filter()を適用して、Oceanと等しいhabitatを持つすべてのクリーチャーを返します。
var aquaticCreatures = creatures.filter(function(creature) {
return creature.habitat == "Ocean";
});
console.log(aquaticCreatures);
このコードは、新しいフィルター処理された配列を生成します。
Output[ {name: "Shark", habitat: "Ocean"}, {name: "Whale", habitat: "Ocean"} ]
「海」に生息する2体の生き物の配列が返されます。
結論
この記事では、filter()配列メソッドについて学習しました。
詳細については、filter（）のMDNリファレンスを参照してください。
フィルタは、JavaScriptの配列に対するいくつかの反復法の1つにすぎません。 JavaScriptで配列反復法を使用する方法を読んで、map()やreduce()などの他の方法について学習してください。
