レッスンに戻る

オブジェクトにマップ

重要度: 5

ユーザオブジェクトの配列があり、それぞれに名前IDがあります。

それを使用して、オブジェクトをidフルネームで生成するもう1つの配列を作成するコードを作成してください。ここで、フルネーム名前から生成されます。

例えば

let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = /* ... your code ... */

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]
*/

alert( usersMapped[0].id ) // 1
alert( usersMapped[0].fullName ) // John Smith

つまり、実際にあなたはオブジェクトの配列を別の配列にマップする必要があります。ここで=>を使用してみてください。小さな注意点があります。

let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = users.map(user => ({
  fullName: `${user.name} ${user.surname}`,
  id: user.id
}));

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]
*/

alert( usersMapped[0].id ); // 1
alert( usersMapped[0].fullName ); // John Smith

矢印関数では追加の括弧を使用する必要があることに注意してください。

このように書くことはできません

let usersMapped = users.map(user => {
  fullName: `${user.name} ${user.surname}`,
  id: user.id
});

覚えてのとおり、2つの矢印関数があります。本文のないvalue => exprと本文付きのvalue => {...}です。

ここではJavaScriptは{を関数の本文の開始ではなく、オブジェクトの開始として扱います。回避策は、それらを「通常の」括弧で囲むことです

let usersMapped = users.map(user => ({
  fullName: `${user.name} ${user.surname}`,
  id: user.id
}));

これで問題ありません。