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

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

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

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

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

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配列に格納されます。