为何需为forEach方法的回调传入多参数才能为DOM元素设置样式？

以下代码可以正常运行：

allParagraphs.forEach((p, i) => {
    if(i == 0){
        p.style.fontSize = '100px';
    }else if(i == 1){
        p.style.fontSize = '10px';
    }else if(i == 2){
        p.style.fontSize = '50px';
    }else if(i == 3){
        p.style.fontSize = '25px';
    }
})

但以下两段代码无法运行，具体原因分析如下：

第一段错误代码问题 #

allParagraphs.forEach((p, i) => {
    if(i == 0){
        i.style.fontSize = '100px';
    }else if(i == 1){
        i.style.fontSize = '10px';
    }else if(i == 2){
        i.style.fontSize = '50px';
    }else if(i == 3){
        i.style.fontSize = '25px';
    }
})

• i是数组的索引值，属于数字类型，数字本身没有style属性。你要操作的是DOM段落元素，也就是回调函数的第一个参数p（它是allParagraphs数组中的元素），直接给数字i设置style会触发错误。

第二段错误代码问题 #

allParagraphs.forEach((p, i) => {
    if(p == 0){
        i.style.fontSize = '100px';
    }else if(p == 1){
        i.style.fontSize = '10px';
    }else if(p == 2){
        i.style.fontSize = '50px';
    }else if(p == 3){
        i.style.fontSize = '25px';
    }
})

这里存在两个核心问题：

1. p是数组中的DOM元素对象，和数字0/1/2/3做相等判断p == 0时，会触发类型转换——DOM对象转数字会得到NaN，而NaN和任何数字都不相等，所以所有if条件都不会被触发。
2. 即便条件能触发，i仍是数字类型的索引，同样没有style属性，操作它的style依然会报错。

补充说明 #

forEach的回调函数参数是固定顺序的：第一个参数是当前遍历到的数组元素（此处为DOM段落元素），第二个是元素的索引数字，第三个是原数组。如果想用索引获取元素，应该使用allParagraphs[i]，而非直接用i本身，示例如下：

allParagraphs.forEach((p, i) => {
    if(i == 0){
        allParagraphs[i].style.fontSize = '100px';
    }
    // ... 其他逻辑
})

这种写法可以正常运行，但直接使用回调中的p会更简洁。

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