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

array.mapでオブジェクトの配列から新しいオブジェクトの配列を返す

業務で必要になって調べたので備忘録です。

const petList = [
  {
    name: 'hana',
    kind: 'dog',
    old: 8,
  },
  {
    name: 'maruo',
    kind: 'cat',
    old: 5,
  },
  {
    name: 'sora',
    kind: 'dog',
    old: 6,
  }
]

array.mapでオブジェクトの配列から1つのプロパティだけ抜き出す

オブジェクトの配列から特定のプロパティだけ抜き出した配列を作る場合には、
お馴染みの書き方でいけます。

const petNames = petList.map(pet => pet.name)
console.log(petNames)
//["hana", "maruo", "sora"]

array.mapでオブジェクトの配列から新しいオブジェクトの配列を返す

各値から以下のようなオブジェクトを作って、その配列を返したい場合があるとします。

{
  name: 'hana@8歳',
  kind: 'dog'
}

以下のように書きます。
{ name: pet.name@pet.old歳, kind: pet.kind}でオブジェクトを作ってあげて、それを()で囲みます。

const newPetList = petList.map(pet => ({ name: `${pet.name}@${pet.old}`, kind: pet.kind }))
console.log(newPetList)
//[{ name: "hana@8歳", kind: "dog"}, { name: "maruo@5歳", kind: "cat"}, { name: "sora@6歳", kind: "dog"}]

まとめ

array.mapは最高

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