JavaScriptのfilter()関数の使い方

チームプロジェクトの際にはフィルター関数を使用することがなかったが、データベースなしでローカルストレージやセッションストレージにデータを保存していたため、削除機能を作るときにフィルター関数を使うことになった。

しかし、頻繁なミスと理解度が低いため、使う際にうまくいかず、ブログを通じて整理してみようと思った。

filter() 関数

filter関数は配列から特定の条件を満たす要素だけを抽出して新しい配列を作成するメソッドである。filterは元の配列を変更せず、条件に合った要素で構成された新しい配列を返す。

const newArray = array.filter((element, index, array) => {
  //条件式
});

element : 配列の要素
index : 現在の要素のインデックス（オプション）
array : filterが呼び出された現在の配列（オプション）
条件式 : オプション

🙌 フィルター関数のコールバック関数はtrueまたはfalseを返すこと！
true = 新しい配列に含まれる。
false = 新しい配列に含まれない。

例1. 偶数のみ再配列

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); //出力結果: [2, 4]

例2.　特定の要素のみ再配列

elementを使用しない場合は、使用しないことを"_"を通じて知らせることができる。
（省略も可能だと言われている！）

const items = ['apple', 'banana', 'cherry'];
const filteredItems = items.filter((_, index) => index !== 1);

console.log(filteredItems); // 出力: ['apple', 'cherry']

プロジェクトで使用された例

実際には、セッションストレージに保存された配列を削除ボタンを通じて該当要素を除外し、再配列する方法で削除機能を実装した。

条件 : index（listという配列の要素）はindexChk（チェックボックスにチェックされた要素）が含まれていない要素か？
--> 条件を満たしたindexだけを再配列してセッションストレージに保存した！

  const removeTodo = () => {
    //チェックされた配列を新たにフィルタリング！セッションストレージに保存する
    const filteredList = list.filter((_, index)=> !indexChk.includes(index) ) 
    setList(filteredList)
    window.sessionStorage.setItem('list',JSON.stringify(filteredList))

    //チェックボックスの状態配列を更新する 
    const filteredChks  = chks.filter((_, index)=> !indexChk.includes(index) ) 
    setChks(filteredChks)

    //選択されたインデックスを初期化する
    setIndexChk([])

  }

条件 : 参考までにチェックボックスの配列状態も更新した後、indexChkは初期化した。