JavaScript　配列の要素を条件で抽出する方法

JavaScriptで配列の要素を条件で抽出する方法について解説します。

配列の要素を条件で抽出する方法ってありますか？

配列の要素を条件で抽出するには、filterメソッドを使用することで簡単に取得することができます。

filterメソッドを使って条件抽出する方法

　filterメソッドは配列の要素をコールバック関数で判定し、条件に合う要素だけを新しい配列に格納します。

　filterメソッドは、配列の各要素を関数に渡し、その結果がtrueだった要素だけを集めた新しい配列を返します。
関数に渡される引数には、「配列の各要素」「そのインデックス」「元の配列」の3つが渡されます。

配列.filter(function(要素値, インデックス, 元の配列){..true/falseを判定する処理…} [, thisValue])

以下は、指定した条件に合う要素だけを抽出するサンプルプログラムです。

// 配列
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 条件に合う要素を抽出
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6, 8, 10]

　上記のサンプルでは、filterメソッドを使用して、numbers配列から偶数だけを抽出し、evenNumbers配列に格納しています。filterメソッドに渡した関数では、引数に受け取ったnumberが2で割り切れるかどうかを判定し、その結果がtrueの場合にのみ配列evenNumbersに格納されます。

filterメソッドの第二引数(thisValue)を指定する方法

　また、このfilterメソッドには、第二引数にthisValueというパラメーターを指定することができます。これを指定することで、filterメソッド内部で使用する関数の中でthisとして参照できる値を指定することができます。

const obj={a:2};
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function(number) {
  return number % this.a === 0;
}, obj);
console.log(evenNumbers); //　[2, 4, 6, 8, 10]

　このサンプルプログラムでは、numbers配列から偶数だけを抽出してevenNumbers配列に格納しています。filter関数の第一引数には、配列の要素を処理するための関数を渡します。この関数には、要素が渡されるので、それを使って条件を判定します。

　第一引数の関数は、「number % this.a === 0」という条件で要素を判定しています。
第二引数には、thisとして使用するオブジェクトを渡します。この例では、objという名前のオブジェクトを渡しています。 obj.aは2なので、第一引数の関数の中のthis.aは2になり、numbers配列の中の偶数だけがevenNumbers配列に格納されます。

someメソッドの使った配列要素の条件の判定

　someメソッドは、配列の要素が指定した条件に合致するものが存在するかを判定するために使用します。
引数には、配列の要素に対して実行する処理を記述したコールバック関数を渡します。

配列.some(function(要素値, インデックス, 元の配列) , [, thisValue])

someメソッドを使った条件の判定については「JavaScript　配列の要素が条件に合致するものが存在するか判定する方法」で詳しく解説しています。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

この記事のまとめ

filterメソッドを利用した「配列の要素を条件で抽出する方法」について解説しました。

filterメソッドは使い方が簡単で、配列から特定の条件を満たす要素を抽出するのに便利ですね！

filterメソッドを使用する際には、抽出条件を記述した関数内で使用するthisについても適切に設定するよう気をつけましょう。

thisValueを指定することで、抽出条件関数内のthisとして使用されるため、より簡潔なコードを書くことができます。