プログラミング初学者のための実務につながる練習問題 JavaScript006 条件を用いたmap を使った配列の加工

2020年5月21日

今日のタスク

前回のタスク http://tamiblog.xyz/2020/05/20/post-584/ に続いて、条件指定してオブジェクトの配列を加工します。

前回のタスクでは、以下のようなユーザーの情報を配列で受け取り、それにisSelectedというプロパティーをセットしました。

[
  {name: 'Taro', age: 18},
  {name: 'Jiro', age: 15},
  {name: 'Saburo', age: 10},
  ...
]

今回、このユーザー情報に追加で isActive というプロパティーが追加され、それがフロントエンドに返ってくるようになりました。以下のような感じです。

[
  {name: 'Taro', age: 18, isActive: true},
  {name: 'Jiro', age: 15, isActive: false},
  {name: 'Saburo', age: 10, isActive: true},
  ...
]

isActiveはそのユーザーが有効なアカウントかどうかを判断するフラグです。上記のようにJiroは無効なユーザーですが、サーバーからは無効なユーザーも有効なユーザーも返ってきます。

フロントエンドでは、有効なユーザーのみを画面に表示したいため、isActive が true なユーザーのみの配列に加工する必要があります。

具体的には以下のように、isActive が true のユーザーのみにしたいです。

[
  {name: 'Taro', age: 18, isActive: true},
  {name: 'Saburo', age: 10, isActive: true},
  ...
]

実装

今回はfilterを使います。

const filterIsActiveUser = users => {
  return users.filter(u => u.isActive)
}

filter は非常に便利なので map と合わせて使いこなされると良いでしょう。

お疲れ様でした。