配列から条件を満たす要素を取り出す

配列から条件を満たす要素のみ取り出す

JavaScriptの配列（Arrayオブジェクト）は標準で多くのメソッドを用意されていますが、その中の1つに指定した条件を満たす値を持った要素だけを取り出すfilterメソッドが用意されています。
基本的な使い方は下記のコード例のようになります。

JavaScript コード例

// (1) 動物の名前が入った配列
const animals = ['rhinoceros','cat','fish','dog','fox','bear'];
console.log(animals);
// 出力結果： (6) ['rhinoceros', 'cat', 'fish', 'dog', 'fox', 'bear']

// (2) filterメソッドで3文字以内の名前の動物のみ取り出す
const res = animals.filter(a => a.length <= 3);
console.log(res);
// 出力結果： (3) ['cat', 'dog', 'fox']

(1)ではまず元になる配列を定義しています。
こちらの配列に(2)でfilterメソッドを使って3文字以内の要素のみを取り出し、定数resに入れます。
そして最後に定数resの内容を出力し、取り出した要素を確認しています。

filterメソッドは元になった配列には影響せず、指定した条件を満たす要素のみの配列を新しく返してくれるため、変数を用意して結果を受け取る必要がある点に注意してください。

配列から指定した文字列と等しい要素のみ取り出す

filterメソッドに指定する条件は任意です。
以下の例では、配列から「cat」または「bear」と等しい文字列の要素のみを取り出します。

JavaScript コード例

// (1) 動物の名前が入った配列
const animals = ['rhinoceros','cat','fish','dog','fox','bear'];
console.log(animals);
// 出力結果： (6) ['rhinoceros', 'cat', 'fish', 'dog', 'fox', 'bear']

// (2) filterメソッドで 'cat' または 'bear' を取り出す
const res = animals.filter(a => (a === 'cat' || a === 'bear'));
console.log(res);
// 出力結果： (2) ['cat', 'bear']

もし該当する要素が見つからない場合は、nullやfalseではなく空配列[]を返します。

配列から条件を満たす要素の位置を取得する

配列の条件を満たす値の位置（添字）を取得したいときはfilterメソッドではなくfindIndexメソッドを使うことで取得できます。

JavaScript コード例

// (1) 動物の名前が入った配列
const animals = ['rhinoceros','cat','fish','dog','fox','bear'];
console.log(animals);
// 出力結果： (6) ['rhinoceros', 'cat', 'fish', 'dog', 'fox', 'bear']

// (2) findIndexメソッドで 'fish' の添字を取得する
const index = animals.findIndex(a => a === 'fish');
console.log(index);
// 出力結果： 2

findIndexメソッドは要素が見つかると位置を数値（Number）で返します。
もし配列の中に見つからなかったときは-1を返します。

配列から条件を満たすオブジェクトを取り出す

filterメソッドは配列に入っているオブジェクトに対しても、条件を満たすもののみを取得することが可能です。
APIなどで取得したデータに対して、条件を満たすデータのみ抽出したいときに便利です。

JavaScript コード例

// (1) オブジェクトが入った配列を用意
const data = [
  {
    id: 1,
    name: 'Alex',
    age: 35,
  },
  {
    id: 2,
    name: 'Bob',
    age: 22,
  },
  {
    id: 3,
    name: 'Emily',
    age: 28,
  },
  {
    id: 4,
    name: 'John',
    age: 21,
  },
  {
    id: 5,
    name: 'Marie',
    age: 32,
  },
];

// (2) filterメソッドで age が 30 以上の要素のみ取り出す
const res = data.filter(a => 30 <= a.age);
console.log(res);
// 出力結果：
// 0: {id: 1, name: 'Alex', age: 35}
// 1: {id: 5, name: 'Marie', age: 32}
// length: 2

条件を満たす要素の位置を取得したいときもfindIndexメソッドを使用できます。
以下の例ではidが4のデータの添字を取得して、その要素のみconsole.logメソッドで出力しています。

JavaScript コード例

// (1) オブジェクトが入った配列を用意
const data = [
  {
    id: 1,
    name: 'Alex',
    age: 35,
  },
  {
    id: 2,
    name: 'Bob',
    age: 22,
  },
  {
    id: 3,
    name: 'Emily',
    age: 28,
  },
  {
    id: 4,
    name: 'John',
    age: 21,
  },
  {
    id: 5,
    name: 'Marie',
    age: 32,
  },
];

// (2) findIndexメソッドで id が 4 の要素の位置を取得する
const index = data.findIndex(a => a.id === 4);
console.log(data[index]);
// 出力結果：
// {id: 4, name: 'John', age: 21}

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。