Help us understand the problem. What is going on with this article?

ソート機能を実装した際に感じたfilterメソッドの魅力

はじめに

先日、開発中のサービスにおいてリアルタイム検索とソート機能を実装した際にJavaScriptのFilterメソットに大いに助けて頂きました。
備忘録を兼ねて機能や使い方を書き残していきたいと思います。

Filterメソットとは?

filter() メソッドは、引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。
MDNより

つまりは関数内で既存の配列から必要箇所を抜き出して、戻り値を用いて新たに配列を作ることも出来ますし、引数を指定してフロント側から欲しい値を持ってくることも出来ます。

How To Use

  const items = [
        { name: "itemA", price: 1500, madeIn: "Japan" },
        { name: "itemB", price: 700, madeIn: "Japan" },
        { name: "itemC", price: 2000, madeIn: "USA" },
        { name: "itemD", price: 300, madeIn: "USA" },
        { name: "itemE", price: 5000, madeIn: "China" }
      ];

      //アロー関数で書くとすっきりして見える
      const filter = arr => {
        return arr.filter(el => el.madeIn == "USA");
      };
      console.log(filter(items)); //madeINがUSAの要素だけが配列として返ってくる

      const filter2 = arr => {
        return arr.filter(el => el.madeIn == "USA" && el.price <= 1000);
        //このようにANDやORで更なる絞り込みも可能です。
      };
      console.log(filter2(items)); //条件に合致するitems[3]だけが返ってくる。

呼び出しの際に、引数の部分に定義ずみの配列を指定して、filter内で受け取り、今回の例では「el」の部分で各要素にアクセスしています。
私は最近Vueを使うことが多く、filterメソットを使って新しく生成した配列をv-forでぶん回すだけでソート機能や検索機能を実装することが出来、大変重宝しました。

以上になります。
それでは、また!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした