JavaScript中forEach函数的参数i与frequency[i]含义是什么？

整体功能说明 #

这段代码实现的是按空格分隔统计文本框内单词出现次数的功能：用户在<textarea>输入内容后点击check按钮，就会在浏览器控制台输出每个单词对应的出现次数。

逐行逻辑拆解 #

JS 部分 #

function check(){
  // 1. 拿到文本框内容并按空格切割成数组
  var word = document.querySelector('textarea').value.split(" ");
  // 2. 初始化空对象，用于存储「单词: 出现次数」的统计结果
  frequency ={};
  // 3. 遍历切割得到的单词数组，逐个统计次数
  word.forEach(function(i){
    console.log(i)
    // 4. 如果当前单词还没被统计过，先给初始值0
    if(!frequency[i]){
      frequency[i] = 0;
    }
    // 5. 当前单词的计数+1
    frequency[i]+=1
  })
  // 6. 控制台输出最终统计结果
  console.log(frequency)
}

HTML 部分 #

<!-- 供用户输入文本的多行输入框 -->
<textarea></textarea>
<!-- 点击触发统计函数的按钮 -->
<button onclick = 'check()'>check</button>

核心疑惑点解答 #

1. forEach里的i代表什么？ #

数组的forEach是遍历方法，会把数组里的每一项挨个过一遍，每遍历到一项就会执行一次你传入的回调函数，回调函数的第一个参数就是当前遍历到的那一项的内容。
这里你的代码把这个参数命名为i，实际代表的是当前遍历到的单个单词：比如你输入hello world hello，切割后的数组是["hello","world","hello"]，第一次遍历i是hello，第二次是world，第三次又是hello，你打开控制台看到的console.log(i)的输出就是这三个值。

新手提示：这个参数命名为i容易和索引混淆，建议改成currentWord或者item，语义会更清晰，不容易理解错。

2. frequency[i]的作用是什么？ #

frequency是我们初始化的空对象，用来存统计结果，对象读取/设置属性有两种写法：

• 固定属性名用点语法：比如frequency.hello就是取对象里hello属性的值
• 动态属性名用方括号语法：这里i是每次遍历的动态单词，所以只能用frequency[i]，代表当前单词对应的统计次数

举个例子：

• 第一次遍历到hello的时候，frequency是空的，frequency["hello"]不存在，所以会走判断逻辑给它赋值为0，然后加1变成1，此时frequency变成{hello:1}
• 第三次遍历又到hello的时候，frequency["hello"]已经是1了，判断不成立，直接加1变成2，最终frequency里hello对应的次数就是2

小优化建议（可选） #

如果输入内容有连续空格，split(" ")会切割出空字符串，如果你不需要统计空值，可以在统计前加个判断过滤即可。

内容的提问来源于stack exchange，提问作者Shawn