如何获取JavaScript forEach循环内的index值并赋值给全局变量

你拿不到值是两个原因共同导致的：

• forEach 回调里的 index 是回调函数的形参，属于函数局部作用域变量，作用域规则决定了它无法在函数外部被直接访问。
• 你写在循环外层的 console.log(index) 执行时机远早于点击事件触发：页面加载时forEach会同步执行完所有星星的点击事件绑定，此时用户还没做点击操作，点击回调里的逻辑根本没执行，哪怕你提前声明了全局变量，这时候读取也拿不到点击对应的索引值。

按下面两步改就能拿到对应索引：

1. 在循环外部的全局/上层作用域提前声明一个变量，专门用来存储点击的星星索引
2. 在点击事件回调触发时，把当前遍历到的index赋值给这个提前声明的变量即可

修改后的可运行代码：

// 上层作用域声明存储索引的变量
let activeStarIndex = -1;

stars.forEach((star, index) => {
  star.addEventListener('click', () => {
    // 点击触发时给外层变量赋值
    activeStarIndex = index;

    stars.forEach((star, idx) => {
      if (idx < index + 1) {
        star.classList.add('active');
      } else {
        star.classList.remove('active');
      }
      console.log('当前点击的星星索引：', index);
      console.log('外层变量存储的索引：', activeStarIndex);
    });
  });
});

// 这行代码在事件绑定阶段就会执行，此时还未发生点击，输出初始值-1是正常现象
console.log('事件绑定阶段的索引值：', activeStarIndex);

注意：如果需要使用点击后更新的索引值，要把读取activeStarIndex的逻辑写在点击事件回调内部，或者放在点击后才会触发的业务逻辑里，不要写在事件绑定的同步执行流程中。

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