JavaScript 计算属性

Posted 2023-02-23

【中文标题】JavaScript 计算属性

【英文标题】：JavaScript computed properties

【发布时间】：2020-07-19 17:39:49

【问题描述】：

我正在关注 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 功能块中的代码。我相信这与计算的属性名称有关。如果有任何帮助，我将不胜感激。

谢谢。

【问题讨论】：

代码比它需要的更复杂。传播只是矫枉过正。是做什么的：function groupBy (acc, review) const count = acc[review] || 0; acc[review] = count + 1; return acc;

【参考方案1】：

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

回调接受 2 个参数：

acc 是累加器，是reducer 将不断推入的数据。它首先被定义为一个空白对象，作为Array.prototype.reduce 中的第二个参数 review 只是数组中当前正在迭代的当前项

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

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

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

【讨论】：

谢谢！这很有帮助。但是，acc[review] 到底是什么意思？据我所知，这意味着评论索引处的空对象？但那怎么可能呢？

acc[review] 基本上是通过对象acc 中的键review 访问值。它被称为括号表示法，您可以在其中使用动态键访问对象中的条目。该代码基本上计算了评论评分的数量：因此您需要存储每个评论分数的计数。最简单的方法就是拥有一个对象，其中包含数组中所有评论分数的键:)

【参考方案2】：

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

在这里它传播acc，并为当前元素添加1到先前的计数，

[1,3,3]

例如，当您在第一个元素上循环此数组时，即1 groupBy 将返回一个类似

的对象

1: 1

现在在第二次迭代中，当前元素是3，所以 groupBy 将传播前一个对象，由于之前没有出现 3，所以 count = 0，groupBy 的返回值将是

1: 1, 3: 1

现在在第三次迭代中，当前元素是 3，因此 groupBy 将传播先前返回的对象，并且对于键 3 它添加 1，因此它返回

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)