为什么我的JavaScript脚本未执行到第三个DOM赋值语句就卡住？

问题原因 #

• 核心问题是代码中使用的aR变量未提前定义，执行到for循环的条件i < aR.length时，会直接抛出Uncaught ReferenceError: aR is not defined的引用错误，导致JS脚本执行直接中断，因此后续给content-3赋值的语句永远不会被执行。

修复方案 #

首先确保aR变量已正确初始化，也可以额外添加变量存在性判断逻辑，避免因变量未定义导致脚本中断，参考修复后的完整代码：

<div id="content-1"></div>
<div id="content-2"></div>
<div id="content-3"></div>

<script type="text/javascript">
    // Write HTML with JS
    document.getElementById("content-1").innerHTML = '<h1>Title</h1>...and more';
    document.getElementById("content-2").innerHTML = 'hello';

    let value = '';
    // 初始化符合结构的aR变量，若aR是外部传入可直接保留下面的判断逻辑
    const aR = [
        {name: '商品1', price: '100元'},
        {name: '商品2', price: '200元'}
    ];
    // 增加数组类型判断，避免变量未定义或非数组类型导致报错
    if(Array.isArray(aR)){
        for(let i = 0; i < aR.length; i++){
            value += aR[i]['name'] + ": " + aR[i]['price'] + "<br/>";
        }
    }
    // 优先使用拼接后的value，空值时兜底显示hi!
    document.getElementById("content-3").innerHTML = value || 'hi!';
</script>

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