为何Eslint的no-loop-func规则禁止循环内的立即执行函数写法？

你提到的第二种场景之所以会触发规则，核心是no-loop-func的校验逻辑本质是禁止在循环体的非安全作用域内创建任何函数表达式/声明，不区分你是否立即执行，主要弊端有以下几点：

• 运行性能损耗：每次循环迭代都要重新创建一个新的函数实例，哪怕你只是立即执行完就丢弃，循环次数多的时候会产生不必要的函数创建和垃圾回收开销
• 可维护性风险：这种写法很容易出现变量捕获的隐性bug，哪怕你现在写的立即执行函数里直接用了i没有存起来后续调用，后续如果有人修改代码，把函数内的逻辑改成存函数到外部，或者加了异步逻辑，就会立刻出现经典的循环变量捕获问题：

// 比如后续有人改代码加了异步逻辑，立刻出问题
for (var i=10; i; i--) {
    (function() { 
        setTimeout(() => console.log(i), 0)
    })(); 
}
// 最后输出的全是0，不是预期的10到1

• 写法冗余：你给出的示例中，完全可以把立即执行函数内部的逻辑直接提出来写到循环体里，不需要包一层函数，代码更简洁易读。

如果你确实需要用立即执行函数来捕获当前迭代的变量值，符合规范的写法是给函数加形参，把当前迭代的i作为实参传入，这种场景下大部分ESLint规则集不会报错：

for (var i=10; i; i--) {
    // 显式捕获当前迭代的i值，属于安全写法
    (function(currentI) { 
        console.log(currentI)
    })(i); 
}

如果你的ESLint还是对这种安全写法报错，可以优先用ES6的块级作用域变量声明let替代var来实现相同效果，代码更简洁也不会触发规则：

for (let i=10; i; i--) {
    console.log(i)
    // 哪怕加异步逻辑也能拿到正确的值
    setTimeout(() => console.log(i), 0)
}

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