Pug模板中if语句内数组each循环失效问题排查

我在Pug模板的if语句里写的each循环跑不起来，但另一组数据用完全一样的逻辑却正常。排查后发现两组数据只有一个显示差异：失效的数据集在页面打印时带方括号[]，但JS判断两者都是对象。

我的Pug代码如下：

- if(framework === 'framework')
    .form__group 
        label=`${frameworkOptions}` // 这行把数组输出到页面，看起来是正常的
        select
            - if(frameworkOptions && frameworkOptions.length > 0)
                each frameworkOption in frameworkOptions
                    option(value=`${frameworkOption._id}`)=`${frameworkOption.text}` 
            - else
                option(disabled)=`No Options available`

奇怪的是，要是删掉&& frameworkOptions.length > 0这个条件，会出现一大堆undefined选项；保留这个条件就只会显示else分支的“No Options available”。想问是循环写法错了，还是这个数组需要特殊处理？

问题根源 #

你遇到的核心问题是**frameworkOptions的真实类型和你预期的不一致**：

• 页面打印出的方括号，大概率说明它要么是JSON字符串格式的数组（比如"[{_id:'1', text:'Vue'},...]"），要么是类数组对象（有类似数组的结构但不是原生Array）。
• JS判定它是对象，可能是因为：类数组对象（比如自定义对象、NodeList）用typeof判断会返回object，但它没有Array的原生方法，导致each循环无法正确遍历；如果是JSON字符串，可能你用了不准确的判断方式（比如instanceof Object）导致误判。

解决步骤 #

1. 先确认数据真实结构：在模板里加一行调试代码，看控制台输出：

   - console.log(typeof frameworkOptions, frameworkOptions)
   

   这能帮你明确它到底是字符串、类数组还是嵌套对象。

2. 针对不同情况处理：

   • 如果是JSON字符串：先解析成原生数组

     - let parsedOptions = typeof frameworkOptions === 'string' ? JSON.parse(frameworkOptions) : frameworkOptions
     

     之后用parsedOptions代替原变量做判断和循环。
   • 如果是类数组对象：转成原生数组

     - let realArray = Array.from(frameworkOptions)
     

   • 如果是嵌套对象（比如数组存在于frameworkOptions.list这类属性里）：直接取对应属性值来使用。

3. 优化判断逻辑：用Array.isArray()更准确判断是否为数组，避免类数组或字符串干扰：

   - if(Array.isArray(frameworkOptions) && frameworkOptions.length > 0)
   

你的循环写法本身没问题，问题出在数据类型不匹配导致遍历和判断失效。

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