Array.map 和 Typescript 对象扩展运算符未映射到原始数组答案

【问题标题】：Array.map and Typescript Object spread operator not mapping to original arrayArray.map 和 Typescript 对象扩展运算符未映射到原始数组
【发布时间】：2018-04-07 23:53:50
【问题描述】：

我在 Typescript 中有一个成员数组。

const members = [
  {
    name: 'John Lennon',
    id: 1
  },
  {
    name: 'Led Zeppelin',
    id: 2
  },
  {
    name: 'Freddie Mercury',
    id: 3
  }
];

当我尝试映射它并添加键时

members.map(member => {
    member.designation = 'Singer';
    return member;
 });

它成功地覆盖了一个数组并添加了键名。但是当我尝试使用对象扩展运算符做同样的事情时。

members.map(member => ({
  ...member,
  designation: 'Singer'
}));

它成功编译，没有错误，但同时没有将键 designation 映射到我的成员数组。

这是正确的做法，还是我遗漏了什么，这只是 Typescript 对象传播操作的问题。

【问题讨论】：

为什么你必须在第二次地图调用中使用括号？我的意思是：member => ({... 而不是 member => {...？我尝试不带括号但出现错误但我不明白为什么...

标签： typescript

【解决方案1】：

在第一个示例中，您修改了对象，在第二个示例中，您创建了一个新对象，该对象将具有原始成员的值和新的指定属性。您需要获取map 创建的新对象数组并使用它：

var memberWithDesignation = members.map(member => ({
  ...member,
  designation: 'Singer'
}));
console.log(memberWithDesignation[0].designation); // Will output Singer

【讨论】：