能否用数组迭代器（如.forEach()）替代for循环实现相同功能？

当然可行！forEach迭代器本身就支持获取当前元素的索引，完全能替代你原来的for循环实现需求。

首先，当你通过document.querySelectorAll('.button')获取到所有按钮元素后，得到的是一个NodeList（类数组对象），现代浏览器里的NodeList原生就支持forEach方法。你只需要在回调函数里添加第二个参数，它就是当前元素在集合中的索引：

const buttons = document.querySelectorAll('.button');
buttons.forEach((button, index) => {
  // 直接调用你的addEvent函数，传入当前按钮元素
  addEvent(button);
  
  // 如果你的addEvent需要用到索引（比如区分不同按钮的逻辑），也可以把index传进去：
  // addEvent(button, index);
});

对比你原来的for循环，这种写法不用手动维护循环变量i，代码更简洁易读，也不容易出现因变量作用域导致的问题（比如用var声明i时可能遇到的闭包陷阱）。

如果需要兼容一些非常老旧的浏览器（不支持NodeList的forEach），你可以先把NodeList转换成数组再使用forEach：

// 方法1：用Array.from转换
const buttonsArray = Array.from(document.querySelectorAll('.button'));
buttonsArray.forEach((button, index) => {
  addEvent(button);
});

// 方法2：用展开运算符转成数组
const buttonsArray = [...document.querySelectorAll('.button')];
buttonsArray.forEach((button, index) => {
  addEvent(button);
});

另外，如果你的addEvent函数不需要用到索引，甚至可以省略index参数，直接写buttons.forEach(button => addEvent(button))，代码会更精简。

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