對物件進行映射 - 現代 JavaScript 教學

你有一個 user 物件陣列，每個物件都有 name、surname 和 id。

撰寫程式碼，從中建立另一個物件陣列，其中物件包含 id 和 fullName，而 fullName 是由 name 和 surname 產生的。

例如

          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
});
        

如我們所知，有兩種箭頭函式：沒有主體的 value => expr 和有主體的 value => {...}。

這裡 JavaScript 會將 { 視為函式主體的開頭，而不是物件的開頭。解決方法是將它們包在「一般」括號中

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

現在好了。