Puppeteer中for循环导致外部dealsId[i]输出未定义问题排查

问题根因 #

问题出在变量i的声明方式和作用域逻辑上：

• 你使用var声明for循环的计数器i，而var不存在块级作用域，这个i会和代码里外层的i共用同一个变量实例
• for循环的终止条件为i < sizes.length，循环正常执行结束后，i的最终值等于sizes.length，而数组dealsId的有效索引范围是0 ~ dealsId.length - 1，只要sizes.length >= dealsId.length，访问dealsId[i]就会出现未定义的情况
• 循环执行前你已经给外层的i赋过有效值，所以第一次打印可以正常输出，循环执行过程中把同一个i的值修改成了超出dealsId索引范围的数值，才导致第二次打印异常。

解决方案 #

方案1：使用let声明循环计数器 #

把for循环的计数器声明方式从var改成let，let具备块级作用域，循环内的i不会污染外层的同名变量：

console.log(dealsId[i]);

// 把var改成let
for (let i = 0; i < sizes.length; i++) {
    var refIdClasses = await sizes[i].$eval('input', a => a.getAttribute('class'));
    if (refIdClasses != 'disabled') {
        var refId = await sizes[i].$eval('input', a => a.getAttribute('value'));
        var size = await sizes[i].$eval('input', a => a.getAttribute('data-size'));
        refIds.push({ size: size, refId: refId });
    }
}
console.log(dealsId[i]);

方案2：修改循环计数器的变量名 #

如果你需要兼容旧环境不支持let，直接给循环计数器换个和外层不冲突的变量名即可：

console.log(dealsId[i]);

// 把循环变量改成j，避免修改外层的i
for (var j = 0; j < sizes.length; j++) {
    var refIdClasses = await sizes[j].$eval('input', a => a.getAttribute('class'));
    if (refIdClasses != 'disabled') {
        var refId = await sizes[j].$eval('input', a => a.getAttribute('value'));
        var size = await sizes[j].$eval('input', a => a.getAttribute('data-size'));
        refIds.push({ size: size, refId: refId });
    }
}
console.log(dealsId[i]);

额外注意 #

如果你确实需要在循环结束后访问循环计数器对应的dealsId值，请先加边界判断，避免数组越界：

if (i < dealsId.length) {
    console.log(dealsId[i]);
} else {
    console.log('索引超出dealsId数组范围');
}

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