map、filter、includeの再理解

1600 ワード
テキストリンク

実施意図


cardsは、複数のcardオブジェクトからなる配列である.
[{},{},{}]こんな顔をしている!!
cateIdAr内の各要素の値がcategoridのcardのみをフィルタしようとします.
不要なオブジェクトをフィルタリングする場合は、[{}]の形状を保たなければならないが、常に配列内のもう一つの配列に一つのオブジェクトを含む構造に出力される...;

変更前のコード


1）初回試行

    cateIdArr = [3, 4]
    
    const arr = cateIdArr.map((cateId) =>
      cards.filter((card) => card.category_id === cateId)
    );
    console.log('arr ', arr);
出力結果

map(), filter()


mapもfilterも配列を返します!
私はmapがforeachとは違って配列を返すことを知っていますが、フィルタが配列を返すことを知らないので、配列中のデータが各配列の構造で出力される理由が分かりません.
やっぱりMDNは

2)2回目の試み...もちろんだめだ

     const arr = cateIdArr.map((cateId) =>
      cards.filter((card) => card.category_id.includes(cateId))
    );
出力結果

includes()

  • 配列に特定の要素が含まれているかどうかを判別し、結果をtrueまたはfalseに返します.
    • 1つの文字列が別の文字列に含まれているかどうかを判別し(大文字と小文字を区別)、結果をtrueまたはfalseに返します.

    修正後のコード

      const arr = cards.filter((card) => cateIdArr.includes(card.category_id));
  console.log('arr ', arr);
  • の各カードのcategory idがcateIdarrにあるかどうかを決定するには、includeを書き込むことはできません(includeは配列または文字列にのみ使用されます).
    Category idは配列または文字列ではないので、配列categorIdArにcategory idがあるかどうかを確認します.
  • 以上の条件が本物のカードでなければ
    • をフィルタできません.
    初めて知ったnode
    同時学習プログラム-FutureTask強力なクラス03