如何使用 forEach 数组方法定位特定索引？答案

【问题标题】：How to target specific index with forEach array method?如何使用 forEach 数组方法定位特定索引？
【发布时间】：2020-01-04 12:09:31
【问题描述】：

所以我想要做的是 console.log 我的三个节点数组的特定元素。

const sentinel = document.querySelectorAll('.sentinel');

    sentinel.forEach(function(element, index){
    setInterval(function(element) {

        if(index === 0){
            console.log(element);
        }

    }, 3000);
});

我用谷歌搜索过，我发现了这个帖子：Get a specific element within forEach loop，它确实提出了同样的问题。但是，当我控制台记录元素时，我希望获得 0 索引上的节点。但是，我得到一个空元素。

【问题讨论】：

从setInterval回调中移除element参数
查看setInterval 的文档。那里提到了如何将某些内容传递给setInterval() 调用的回调（在这种情况下这不是必需的，因为它位于.forEach() 中）

标签： javascript arrays

【解决方案1】：

您可以从setInterval 中删除element，因为内部函数setInterval 可以访问外部函数的变量，例如element。这种行为称为闭包。

此外，可以使用箭头函数来使您的代码更短、更简洁。另外，arrow functions：

箭头函数没有自己的 this。的这个值使用封闭词法范围；箭头功能遵循正常变量查找规则。

sentinel.forEach((element, index) => {
   setInterval(() =>{

    if (index === 0){
        console.log(element);
    }

}, 3000);

【讨论】：

回调可以获取参数。需要在延迟参数后传递给setInterval
箭头函数与问题/答案有什么关系？
“您可以从 setInterval 中删除 element” - 为什么？
谢谢！这解决了问题。还要感谢带有箭头功能的提醒。可能是一种更清洁的方式！
更好，但我仍然想念为什么只使用element 有效。但是为什么在this 上引用箭头函数呢？您和 OP 都不会在任何地方使用 this。如果您已经添加了不相关的内容，那么还要添加一个链接，指向为什么您不能总是简单地用箭头函数交换 function() { ... }。

【解决方案2】：

所以实际上你需要将元素绑定到 setInterval 函数中

const sentinel = document.querySelectorAll('.sentinel');

sentinel.forEach(function(element, index){
    (function (_element, _index){
        setInterval(function() {

           if(_index === 0){
             console.log(_element);
           }

        }, 3000);
    })(element, index);
});

【讨论】：

这里不需要IIFE。您可以将参数从setInterval 本身传递给回调。在 3000（延迟参数）之后传递的任何内容都将在回调中使用。所以，setInterval(function (e, i) {... }, 3000, element, index) 应该可以工作。 Documentation