React项目forEach循环触发no-loop-func警告的风险与解决方法

let oldInfo

function getChanges() {
    const newInfo = {};
    let keys = ["name", "age", "sex"];

    oldInfo = "one";
    for (const key in newInfo) {
        keys.forEach(subkey => {
            if (oldInfo[subkey] === newInfo[key])
                console.log(subkey);
        });
    }
}

getChanges();

触发的ESLint警告如下：

Line 9:22:  Function declared in a loop contains unsafe references to variable(s) 'oldInfo'  no-loop-func

该警告的核心是规避闭包的变量绑定陷阱：

• 循环内部声明的箭头函数属于循环迭代创建的函数，它捕获的是外层用let声明的可变变量oldInfo的引用，而非创建函数时oldInfo的瞬时值
• 若后续循环逻辑中存在修改oldInfo赋值的操作，所有循环迭代中创建的箭头函数执行时，读取到的都会是循环结束后oldInfo的最终值，而非当前迭代对应的预期值，会出现难以排查的逻辑错误
• ESLint无法判断你后续是否会修改该变量，所以会统一抛出警告提示风险

方案1：将可变变量改为常量声明（最推荐） #

如果oldInfo在业务逻辑中不需要重新赋值，直接将其声明为const，ESLint识别到不可变后会自动消除警告，示例如下：

function getChanges() {
    const newInfo = {};
    const keys = ["name", "age", "sex"];
    // 将oldInfo移到函数内部声明为不可变常量
    const oldInfo = "one";
    for (const key in newInfo) {
        keys.forEach(subkey => {
            if (oldInfo[subkey] === newInfo[key])
                console.log(subkey);
        });
    }
}

getChanges();

方案2：循环内固化变量引用 #

如果确实需要保留oldInfo的可变特性，可以在循环内部将当前迭代的oldInfo值赋值给局部常量，切断与外层可变变量的引用关联：

let oldInfo

function getChanges() {
    const newInfo = {};
    const keys = ["name", "age", "sex"];

    oldInfo = "one";
    for (const key in newInfo) {
        // 将当前迭代的oldInfo值固化为局部常量
        const currentOldInfo = oldInfo;
        keys.forEach(subkey => {
            if (currentOldInfo[subkey] === newInfo[key])
                console.log(subkey);
        });
    }
}

getChanges();

方案3：手动禁用规则校验（不推荐） #

如果你完全确认当前逻辑不存在闭包风险，可以在对应行添加注释临时禁用规则校验：

// eslint-disable-next-line no-loop-func
keys.forEach(subkey => {
    if (oldInfo[subkey] === newInfo[key])
        console.log(subkey);
});

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