浏览器无法运行计算最大面积的JS代码，该如何排查修复？

问题原因 #

你的代码出现无限死循环，导致浏览器线程被占满、页面无法加载，核心有2个语法逻辑错误：

• 内层for循环的终止条件写为赋值语句n = array.length - 2，而非判断语句，每次循环都会强制把n重置为固定值，永远无法满足循环终止条件，陷入死循环
• 高度判断的else if分支误用赋值运算符=，而非相等判断运算符===，会意外修改原数组的值，同时判断逻辑也完全错误
• 额外优化建议：循环变量i、n未声明，会默认挂载为全局变量，存在变量污染风险；高度判断逻辑可以简化为直接用Math.min()方法更简洁

修复后完整代码 #

var array = [1, 8, 6, 2, 5, 4, 8, 3, 7];
var height, width, area;
var maxArea = 0;

function largestArea () {
    // 声明循环变量，避免全局污染
    for (let i = 0; i < array.length; i++){
        // 修正循环终止条件为判断逻辑
        for (let n = i+1; n < array.length; n++) {
            // 简化高度计算，同时修正原判断的赋值错误
            height = Math.min(array[i], array[n]);
            width = n - i;
            area = height * width;
            if (area > maxArea) {
                maxArea = area;
            }
        }
    }
    console.log(maxArea);
}
largestArea();

运行后控制台会输出正确结果49，也不会出现页面卡死问题。

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