在地图TypeScript中是什么意思？

Question

return items.map(item => ({
      ...item,
      score: Math.round((item.rate / 100) * 5)
    }));

我知道它会更改每个对象score的items值。但是为什么会有...item？

使用它有什么好处？

这是否等于？：

return items.map(item => ({
          item.score: Math.round((item.rate / 100) * 5);
          return item;
        }));

Answer 1

相当于

Array.prototype.map.call(items, function(item) {
  return Object.assign({}, item, {
    score: Math.round((item.rate / 100) * 5)
  });
});

这种方法的想法是创建一个新数组，并为旧创建的每个项目创建一个包含所有旧属性和一个score属性的新对象。如果项目上存在score（旧数组的条目，它将在新对象上被覆盖）

Answer 2

这是散布运算符，基本上该函数正在执行的操作是获取每个项目，并将其映射到包含以下内容的对象：该项目的完整克隆和分数

{ item, score }

而您建议的函数将只返回具有添加属性的项目对象score，并且还将该属性添加到原始items数组中的元素，因为您正在修改所引用的对象，而不是副本它。

使用哪个？好，这取决于您的需求。

Answer 3

如果要创建现有值的浅表副本并更新对象/数组spread operator，则使用immutably很有用。

一种经常使用的传播语法是当您在React.js中使用Redux或在Angular中使用NgRX时。

对于您提供的代码，

return items.map(item => ({
  ...item,
  score: Math.round((item.rate / 100) * 5)
}));

结果数组将是items数组的浅表副本以及原始属性/值，然后是score数组的每个对象内的items属性的更新值。

Answer 4

类似于先前的答案，请注意，散布运算符正在将item的内容散布到另一个花括号中。

将item的内容浅复制到该新对象中，但替换为score的新值。

这是一种内存有效的复制过程，可确保非常好的代码可读性。它与您的建议类似。

在这种情况下，它仅提供更好的语法糖。我建议您考虑将散布运算符以及其他用例用于此目的。