JavaScript配列フィルター：テスト関数に基づいた配列要素のフィルタリング

概要：このチュートリアルでは、JavaScript配列のfilter()メソッドを使用して、配列内の要素をフィルタリングする方法を学習します。

JavaScript配列 filter() メソッドの紹介

配列を扱う際の最も一般的なタスクの1つは、元の配列の要素のサブセットを含む新しい配列を作成することです。

各オブジェクトにnameとpopulationの2つのプロパティを含む都市オブジェクトの配列があるとします。

let cities = [
    {name: 'Los Angeles', population: 3792621},
    {name: 'New York', population: 8175133},
    {name: 'Chicago', population: 2695598},
    {name: 'Houston', population: 2099451},
    {name: 'Philadelphia', population: 1526006}
];Code language: JavaScript (javascript)

人口が300万人を超える都市を見つけるには、通常、forループを使用して配列要素をループし、populationプロパティの値が条件を満たしているかどうかを次のようにテストします。

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);Code language: JavaScript (javascript)

出力

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]Code language: JavaScript (javascript)

JavaScript配列は、このタスクをより短く、よりクリーンな方法で実行できるfilter()メソッドを提供します。

次の例は、上記の例と同じ結果を返します。

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);Code language: JavaScript (javascript)

この例では、cities配列オブジェクトのfilter()メソッドを呼び出し、各要素をテストする関数を渡します。

関数内では、配列内の各都市のpopulationが300万人を超えているかどうかを確認します。その場合、関数はtrueを返し、そうでない場合はfalseを返します。

filter()メソッドは、コールバック関数でのテストを満たす場合にのみ、結果配列に要素を含めます。

ES6以降、アロー関数を使用して、より簡潔にすることができます。

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);Code language: JavaScript (javascript)

JavaScript配列 filter() メソッドの詳細

以下は、filter()メソッドの構文を示しています。

arrayObject.filter(callback, contextObject);Code language: CSS (css)

filter()メソッドは、callback()関数によって実装されたテストに合格したすべての要素を含む新しい配列を作成します。

内部的には、filter()メソッドは配列の各要素を反復処理し、各要素をcallback関数に渡します。 callback関数がtrueを返すと、戻り値の配列に要素が含まれます。

filter()メソッドは、callback関数とオプションのオブジェクトという2つの名前付き引数を受け入れます。

every()、some()、map()、forEach()などの配列オブジェクトの他の反復メソッドと同様に、callback関数は次の形式になります。

function callback(currentElement, index, array){
   // ...
}Code language: JavaScript (javascript)

callback関数は3つの引数を取ります。

currentElement引数は、callback関数によって処理されている配列の現在の要素です。
callback関数によって処理されているcurrentElementのindexです。
トラバースされているarrayオブジェクトです。

indexおよびarray引数はオプションです。

filter()メソッドのcontexObject引数はオプションです。 this値を渡すと、callback関数内でthisキーワードを使用して参照できます。

filter()メソッドは元の配列を変更しないことに注意することが重要です。

JavaScript配列 filter() メソッドのその他の例

filter()メソッドは新しい配列を返すため、結果をsort()やmap()などの他の配列メソッドとチェーンすることができます.

たとえば、以下は、filter()、sort()、およびmap()の3つのメソッドをチェーンする方法を示しています。

cities
    .filter(city => city.population < 3000000)
    .sort((c1, c2) => c1.population - c2.population)
    .map(city => console.log(city.name + ':' + city.population));
Code language: JavaScript (javascript)

出力

Philadelphia:1526006
Houston:2099451
Chicago:2695598Code language: CSS (css)

仕組み

まず、filter()メソッドを使用して、人口が300万人未満の都市をフィルタリングします。
次に、sort()メソッドを使用して、結果の都市を人口の降順に並べ替えます。
3番目に、map()メソッドを使用して、配列要素をコンソールに出力します.

次の例は、thisキーワードを使用してcallback()関数で参照できるオブジェクトを指定するcontextObject引数の使用方法を示しています。

function isInRange(value) {
    if (typeof value !== 'number') {
        return false;
    }
    return value >= this.lower && value <= this.upper;
}

let data = [10, 20, "30", 1, 5, 'JavaScript filter', undefined, 'example'];

let range = {
    lower: 1,
    upper: 10
};

let numberInRange = data.filter(isInRange, range);

console.log(numberInRange); // [10, 1, 5]Code language: JavaScript (javascript)

出力

[ 10, 1, 5 ]Code language: JSON / JSON with Comments (json)

仕組み

まず、引数が数値であり、オブジェクトのlowerおよびupperプロパティで指定された範囲内にあるかどうかを確認するisInRange()関数を定義します。
次に、数値、文字列、および未定義を含む混合データの配列を定義します。
次に、2つのプロパティlowerとupperを持つrangeオブジェクトを定義します.
その後、data配列のfilter()メソッドを呼び出し、isInRange()関数とrangeオブジェクトを渡します。 rangeオブジェクトを渡すため、isInRange()関数内では、thisキーワードはrangeオブジェクトを参照します.
最後に、結果の配列をコンソールに表示します.

このチュートリアルでは、JavaScript配列のfilter()メソッドを使用して、コールバック関数によって提供されるテストに基づいて配列内の要素をフィルタリングする方法を学習しました。

このチュートリアルは役に立ちましたか？