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

2020年5月20日

今日のタスク

サーバーサイドから受け取ったデータを画面にテーブル形式で表示する処理があります。テーブル上では各行を選択することができます。

行が選択されているかどうかをフラグで管理する必要があるため、受け取ったデータにisSelectedというプロパティを追加します。

なお、サーバーサイドからは以下のように、オブジェクトの配列の形式でデータがきます。

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

このデータを加工して以下のようにしたいのです。

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

実装例

今回は以下のようにArray.map()を使ってみました。

const addIsSelect = data => {
  return data.map(d => {return {...d, isSelected: false}})
}

…d はスプレッド演算子と呼ばれるもので、非常に簡潔にかけるので是非覚えておきましょう。

※なお、古いブラウザでは動かないことがあるので、トランスパイルが必要です。こちらも調べておくと良いでしょう。

お疲れ様でした。