JavaScript

最終更新日:
公開日:

レシピ

配列

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

配列(Arrayオブジェクト)の標準メソッドとして用意されたfilterメソッドを使って、配列から条件を満たす要素のみを取り出す方法について解説します。

この記事のポイント

  • 配列(Arrayオブジェクト)が標準で用意するfilterメソッドを使うと簡単に条件を満たす要素を取得できる
  • 要素の位置を取得したいときはfindIndexメソッドを使う
  • APIのデータなどオブジェクトが入った配列で条件を満たすデータを抽出することもできる

目次

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

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']

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

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

配列の条件を満たす値の位置(添字)を取得したいときは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メソッドを使用できます。
以下の例ではid4のデータの添字を取得して、その要素のみ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}