🔎

JavaScript filter

2024/08/20に公開

JavaScript

filter

tech

filterの色々なパターン

JavaScripで、条件に一致する内容を検索するときに、filterメソッドを使うことがあります。　arrayが持っている機能ですね。

あまり理解していないので、色々なパターンを試してみました。

filter() は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。

const array = ['apple', 'banana', 'cherry', 'date', 'eggplant'];
const result = array.filter((element) => element.length > 5);
console.log(result); // ['banana', 'cherry']

公式の解説だと

引数

callbackFn
- 配列のそれぞれの要素に対して実行する関数です。この関数は、配列の要素を保持する場合は真値、保持しない場合は偽値を返します。この関数は以下の引数で呼び出されます。
element
- 配列内で処理中の現在の要素です。
index
- 配列内で処理中の現在の要素のインデックスです。
array
- filter() が呼び出された配列です。

thisArg 省略可
callbackFn を実行する際に this として使用される値。反復処理メソッドを参照してください。

data typeを指定して、フィルタリングもできる。typeofの後に、elementとデータ型を比較させる。

const array = ['apple', 15, 'banana', 20, 'cherry', 25, 'date', 30, 'eggplant', 35];

const result = array.filter((element) => typeof element === 'string');
console.log(result); // ['apple', 'banana', 'cherry', 'date', 'eggplant']

const result2 = array.filter((element) => typeof element === 'number');
console.log(result2); // [15, 20, 25, 30, 35]

JSON の不正な内容を取り除く

次の例では、filter() を使って id の数値が 0 以外の要素だけに絞った JSON を生成します。

const arr = [
    { id: 15 },
    { id: -1 },
    { id: 0 },
    { id: 3 },
    { id: 12.2 },
    {},
    { id: null },
    { id: NaN },
    { id: "undefined" },
  ];
  
  let invalidEntries = 0;

  const filterByID = (item) => {
    if (Number.isFinite(item.id) && item.id !== 0) {
      return true;
    }
    invalidEntries++;
    return false;
  };
  
  const arrByID = arr.filter(filterByID);
  
  console.log("Filtered Array\n", arrByID);
  // Filtered Array
  // [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
  
  console.log("Number of Invalid Entries =", invalidEntries);
  // Number of Invalid Entries = 5

公式のコードをarrow functionに、書き換えて使っていますが、やってることは、同じで、!==で、　item.idが、0, {}, null, NaN, undefinedを除外して、それ以外の値を取得しています。

まとめ

filterは、Reactで検索のロジックを書くときによく使うので、覚えておいた方が良いですね。書き方のパターンが複数あるとは。。。。

filterの色々なパターン

引数

JSON の不正な内容を取り除く

まとめ

Discussion