TypeScriptでの文法(配列でmap()filter()を同時に行う)について

Question

実現したいこと

• 同一ロジックを一回しか使わない様にしたい。

前提

Vue.js＋Nuxtでフロントエンドのシステムを作っています。
特にエラーとなっているわけではなく、動作も期待した通りに動いています。

ただ、同一ロジックを２か所使用しており、文法的にもっと綺麗に書けるかの質問になります。
map()関数で①の条件をundefinedで返せればすっきりすると思うのですが難しいでしょうか？

アドバイス頂ければ有難いです。

該当のソースコード

const { $isEmpty } = useNuxtApp();

// 表示一覧取得
const items = computed(() => {
  return store.list1
    .filter((row) => {
      // ①値が空で無い
      const item = store.list2.find(({ cd }) => cd === row.cd);
      return !$isEmpty.isEmpty(item.disp);
    })
    .map((row, index) => {
      // ②cdで一致したデータから表示要素を取得する
      const item = store.list2.find(({ cd }) => cd === row.cd);
      return {
        title: `${item.title}${index + 1}: ${item.disp}`,
        data: item.data,
      };
    });
});

試したこと

重複してる下記ロジックを一つにしようとしている。
const item = store.list2.find(({ cd }) => cd === row.cd);

補足情報（FW/ツールのバージョンなど）

VSCodeで確認してます。

Answer 1

flatMapを使う（結果配列から除外したいものの場合は空配列を返す）ことで、mapとfilterを一気に片付けることができます。