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 出现在项目上（旧数组的条目将被新对象覆盖）

Answer 2

这是传播运算符，基本上是函数在做什么，获取每个项目，将其映射到包含以下内容的对象：项目的完整克隆，以及分数

{ item, score }

虽然您建议的函数只会 return 带有添加属性的项目对象 score，并且还会将该属性添加到原始 items 数组中的元素，如您正在修改引用的对象，而不是它的副本。

使用哪个？嗯，这取决于你的需要。

Answer 3

使用 spread operator is useful, if you want to create a shallow copy of the existing values, and update the object/array immutably.

扩展语法的一个常见用法是当您对 Angular 使用 Redux for React.js or NgRX 时。

对于您提供的代码，

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

生成的数组将是 items 数组与原始 properties/values 数组的浅表副本，后跟每个对象中 score 属性的更新值items 数组。

Answer 4

与之前的答案相似，请注意展开运算符将 item 的内容展开到另一个花括号中。

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

这是一个内存高效的复制过程，代码可读性非常好。它与您的建议相似。

它只是在那种情况下提供了更好的语法糖。如果仅出于此目的以及它的其他用例，我建议您考虑多使用点差运算符。

TypeScript - 为什么在地图中使用展开运算符？