【JavaScript】find,findIndex,filterによる配列オブジェクト加工例

やりたかったこと

指定したプロパティのvalueを持つ要素にだけ、追加でpushなどをしたかった時の実装方法について少し時間がかかってしまったのでその備忘録です。
例えば、下記のようなデータがAPIから返ってくるとます。

 const data = [
        {
          date: "2022-12-11",
          messages: [
            {
              text: "メッセージデータ1-1",
              creatTime: "10:00",
            },
          ],
        },
        {
          date: "2022-12-12",
          messages: [
            {
              text: "メッセージデータ2-1",
              creatTime: "11:00",
            },
            {
              text: "メッセージデータ2-2",
              creatTime: "12:00",
            },
          ],
        },
        {
          date: "2022-12-13",
          messages: [
            {
              text: "メッセージデータ3-1",
              creatTime: "10:00",
            },
          ],
        },
      ];

日付が一致したオブジェクトのmessagesプロパティにのみ、新しいメッセージとしてオブジェクトを追加します。
そのような時にfind,findIndexを用いることで実装が可能です。

find(),findIndex()

find()はコールバック関数を引数に持ちます。
booleanとなる条件を設定し、それを満たす配列内の一番最初の要素のみ返します。
findIndex()は、そのindex番号を返すという違いです。

find()の場合

const find = data.find((item) => item.date === "2022-12-12");
console.log(find); // → {date: '2022-12-12', messages: Array(2)}
find.messages.push({
        text: "メッセージデータ2-3",
        creatTime: "13:00",
    });
});

findIndex()の場合

const findIndex = data.findIndex((item) => item.date === "2022-12-12");
      console.log(findIndex); // → 1
      data[findIndex].messages.push({
        text: "メッセージデータ2-4",
        creatTime: "14:00",
      });

dataをconsoleすると指定した2022-12-12の日付をもつ要素にだけ新しいデータをpushすることができました。

filter()

filter()も同様にコールバック関数を引数に持ち、booleanとなる条件を設定します。
それを満たす配列内の全ての要素を抽出した新しい配列を生成します。
今回やりたかったこととは少し違いますね。

 const filter = data.filter((item) => {
    return item.date === "2022-12-13";
});

まとめ

複雑?なデータの加工や抽出はまだ時間がかかってしまいますが、いろんなメソッドを知っておくと素早くやりたいことがコードに落とし込めそうですね。
配列内に値が存在するかどうかを調べる必要がある場合は、includes()、指定したテスト関数を満たす要素があるかどうかを調べる必要がある場合は、some()を使用できるとのことです✍🏻