🚀

[JavaScript]filterについて

2022/10/04に公開約3,800字

filterとは

  • 配列の内容を特定の条件で絞り込むメソッド。
  • コールバック関数で指定した条件で個々の要素を判定して、条件に合う要素だけを取り出すときに利用する。

書き方

  • filterを利用するときは、配列に対してfilterメソッドを指定する。
array.filter(callback [,that]);
  • arrayには予め作成した配列オブジェクトを指定する。
  • callbackには、配列要素の値「value」、配列要素の数値インデックス「index」、配列要素を格納している配列オブジェクト「arrayObj」を指定出来る。
  • 各配列要素に対して、callbackが真を返した要素が新しい配列として生成される。
  • callbackが真を返さなかった要素はスキップされ、新しい配列には含まれない。

配列の中から奇数だけを取り出す

const data = [1, 4, 7, 12, 21];
const result = data.filter(function (value) {
  return value % 2 === 1;
});
console.log(result); 
// result = [1,7,21]

整数配列に対するfilter

// 配列の宣言
const array = [12, 24, 5, 37, 54, 48, 61];
const result = array.filter(function (value) {
  // 25よりも大きい数を抽出
  return value > 25;
});
// 結果出力
console.log('result: ', result);
// result:  [ 37, 54, 48, 61 ]

文字列に対するfilter

// 配列の宣言
const array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];
const result = array.filter(function (value) {
  // 「saburo」を抽出
  return value === 'saburo';
});
// 結果出力
console.log('result: ', result);
// result:  [ 'saburo' ]
  • 複数条件でも抽出可能
// 配列の宣言
const array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];
const result = array.filter(function (value) {
  // 「saburo」または「goro」を抽出
  return value === 'saburo' || value === 'goro';
});
// 結果出力
console.log('result: ', result);
// result:  [ 'saburo', 'goro' ]
  • includesメソッドを使用すれば、特定文字列を含む要素を抽出できる。
// 配列の宣言
const array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];
const result = array.filter(function (value) {
  // 「ro」を含む文字列を抽出
  return value.includes('ro');
});
// 結果出力
console.log('result: ', result);
// result:  [ 'ichiro', 'jiro', 'saburo', 'shiro', 'goro'  ]

第2引数(index)の使い方

// 配列の宣言
const array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];
const result = array.filter(function (value, index) {
  // 偶数のindexを抽出
  return index % 2 === 0;
});
// 結果出力
console.log('result: ', result);
// result:  [ 'ichiro', 'saburo', 'goro' ]

第3引数(array)の使い方

// 配列の宣言
const array = [1, 2, 5, 3, 5, 4, 6, 2, 1, 6];
const result = array.filter(function (value, index, array) {
  // indexを比較し、重複データを排除
  return array.indexOf(value) === index;
});
// 結果出力
console.log('result: ', result);
// result:  [ 1, 2, 5, 3, 4, 6 ]
  • indexOfメソッドでインデックス番号が分かる。
  • インデックス番号とインデックスを比較することで、重複データを排除した配列を生成できる。
  • 同様に、重複データ以外を排除した配列も生成できる。
// 配列の宣言
const array = [1, 2, 5, 3, 5, 4, 6, 2, 1, 6];
const result = array.filter(function (value, index, array) {
  // indexを比較し、重複データ以外を排除
  return array.indexOf(value) !== index;
});
// 結果出力
console.log('result: ', result);
// result:  [ 5, 2, 1, 6 ]

連想配列に対するfilter

  • filterは配列だけでなく、連想配列に対しても使用できる。
// 連想配列の宣言
const array = [
  { id: 1, name: 'ichiro', gender: 'male' },
  { id: 2, name: 'hanako', gender: 'female' },
  { id: 3, name: 'jiro', gender: 'male' },
  { id: 4, name: 'satomi', gender: 'female' },
  { id: 5, name: 'saburo', gender: 'male' },
  { id: 2, name: 'hiroko', gender: 'female' },
];

const result = array.filter(function (value) {
  // genderがmaleの要素を抽出
  return value.gender === 'male';
});

// 結果出力
console.log('result: ', result);
// result:  [
  { id: 1, name: 'ichiro', gender: 'male' },
  { id: 3, name: 'jiro', gender: 'male' },
  { id: 5, name: 'saburo', gender: 'male' }
]

アロー演算子

  • アロー演算子を使えば、filterをシンプルに記述できる
// 配列の宣言
const array = [12, 24, 5, 37, 54, 48, 61];

// アロー演算子を使わない場合
const result1 = array.filter(function (value) {
  // 25よりも大きい数を抽出
  return value > 25;
});

// アロー演算子による記述
const result2 = array.filter((value) => value > 25);

// 結果出力
console.log('result1: ', result1);
// result1:  [ 37, 54, 48, 61 ]

console.log('result2: ', result2);
// result2:  [ 37, 54, 48, 61 ]

まとめ

  • filterを利用すると、特定の条件に合致した配列要素だけを取り出すことが出来る。
  • 判定条件によっては有用に使えるシーンが多いメソッド。

参考

https://magazine.techacademy.jp/magazine/15575
https://www.fenet.jp/dotnet/column/language/7232/

Discussion

ログインするとコメントできます