0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

javascriptで連想配列にmapメソッドとfilterメソッドを同時に使う話

Posted at

最初に

初心者が書いています。個人的メモ程度に思ってみてください。
もし、他の解決法などがあれば教えていただけると嬉しいです。
Markdownの記法に慣れるための練習も兼ねています。
「普通はこういう書き方するよ!」みたいなアドバイスも頂ければ幸いです。

本題

連想配列内の値を同時に複数取り出したい時を考えます。
例えば以下のような連想配列があります。

const inventory = [{
              name: "apple",
              price: 120,
              category: "fruits"
             }
             {
              name:"bed",
              price: 3000,
              category: "furniture"
             }
            {
              name: "chair",
              price: 400,
              category: "furniture"
             }]

この中のIDが1と3の時の値を同時に取り出したい時、このように考えます。

const index = [1, 3];

const result = inventory.map(item => item.filter(i => i.id === index))
console.log(result)

しかし、この書き方だとエラーを吐きます。
Uncaught TypeError: item.filter is not a function
filterが関数として見なされていないそうです。
調べてもよくわかりませんでした。
おそらくですが、mapメソッドの中で他のメソッドが使えないんだと思います。
(違ったら教えてください)
いろいろ試した結果、こうやったら動きました。

const result = inventory.filter(item => index.includes(item.id)).map(item => item["name"]);

console.log(result)
  • 出力画面
// [object Array] (2)
["apple","chair"]

余談

配列の中から特定の条件を満たす要素を探すときにfindかfilterのどちらを使うべきかという話。
自分の感覚ではfilterを使うべきなのかなと思いました。
というのも、

  • find : 配列の要素の中から条件を満たす最も前の要素を1つだけ取り出す
  • filter : 配列の要素の中から条件を満たす全ての要素を取り出す

findを使うと取りこぼしが発生してしまうのでfilterを使うべきなのかなと。
一つしか入り得ないのならばfindでもいいのかもしれないです。
こちらの方が要素を見つけ次第探索を終了するから処理が少なくなって良いのかな?

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?