JavaScript 计算属性

Question

我正在学习 James Moore 的 JavaScript 初学者函数式编程课程。但是，我目前在理解以下代码时遇到困难：

const reviews = [4.5, 4.0, 5.0, 2.0, 1.0, 5.0, 3.0, 4.0, 1.0, 5.0, 4.5, 3.0, 2.5, 2.0];

const countGroupedByReview = reviews.reduce(groupBy, {});

function groupBy (acc, review){
  const count = acc[review] || 0;
  return {...acc, [review]: count + 1}
}

虽然我了解 reduce 方法的工作方式，但我很难理解 groupBy 功能块中的代码。我相信这与计算的属性名称有关。如果有任何帮助，我将不胜感激。

谢谢。

Answer 1

它认为代码块中没有任何计算的属性名称。此代码块的作用是计算数组中每个评论分数的出现次数。让我们先逐步了解回调及其参数：

回调接受 2 个参数：

acc是accumulator，就是reducer会一直往里推的数据。它首先被定义为一个空白对象，作为Array.prototype.reduce
review 只是数组中当前正在迭代的当前项

现在进入回调本身的代码。 const count = acc[review] || 0 行的意思是：

如果数组项作为键存在于累加器中，则return它的值
如果数组项不作为键存在于累加器中，则将其值设置为 0

之后，您只需将计数加 1，因为您刚刚遇到该项目，并且您希望将其添加到总计数中，按数组项目的值分组。 { ...acc, [review]: count + 1 } 只是一个对象传播函数，它只是意味着：保留我为累加器拥有的任何键值对，但合并对特定键值对所做的更改。

Answer 2

{...acc, [review]: count + 1}

在这里它扩展了 acc 并且对于当前元素它添加 1 到先前的计数，

[1,3,3]

例如，当您在第一个元素上遍历此数组时，即 1 groupBy 将 return 一个对象，如

{ 1: 1 }

现在在第二次迭代中当前元素是 3 所以 groupBy 将传播前一个对象并且因为 3 之前没有出现所以 count = 0, return 值的 groupBy 将是

{ 1: 1, 3: 1}

现在在第三次迭代中，当前元素是 3，因此 groupBy 将展开前一个 returned 对象，并为键 3 添加 1，因此它 returns

{ 1: 1, 3: 2}

一个简单的版本可以是这样的

const reviews = [4.5, 4.0, 5.0, 2.0, 1.0, 5.0, 3.0, 4.0, 1.0, 5.0, 4.5, 3.0, 2.5, 2.0];

const countGroupedByReview = reviews.reduce(groupBy, {});

function groupBy(acc, review) {
  acc[review] = acc[review] || 0;
  acc[review]++
  return acc
}

console.log(countGroupedByReview)

JavaScript 计算属性

JavaScript computed properties

javascript

arrays

object

reducers

computed-properties