为什么我必须将多个参数传递给 forEach 方法的回调函数才能对 dom 元素执行样式设置？

Question

嘿，我的以下代码如下所示（并且它有效）：

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';
    }
})

但我想知道为什么以下两个不起作用？：

1.

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';
    }
})

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';
    }
})

我认为传递给回调的参数只是数组索引的抽象，因此元素是由索引调用的？但如果这是真的，至少第二个例子应该可行吧？我刚刚学习编码。抱歉，如果这个问题很愚蠢

Answer 1

工作方式.forEach是它将逐步遍历数组并为该数组的每个元素调用您的函数。当你的函数被调用时，会传入三件事：

1. 我们现在正在处理的数组元素
2. 找到该元素的索引
3. 整个数组

它们作为函数的第一个、第二个和第三个参数传递。您可以随意命名它们，但第一个始终是元素，第二个始终是索引，第三个始终是数组。如果您不需要后面的参数，那么可以忽略它们（例如，您没有数组的第三个参数，这很常见）

所以在这段代码中：

allParagraphs.forEach((p, i) => {

p是数组的元素（段落），i是索引（数字）。任何需要索引的代码都必须与i（例如，if(i == 0){）交互，并且任何需要元素的代码都必须与p（例如，p.style.fontSize = '100px';）交互。

做类似的事情i.style.fontSize = '10px';是行不通的，因为它i只是一个数字并且没有样式属性。并且if(p == 0){不会工作，因为p不是数字，因此不是零。