如何在jQuery $.each中规避读取src时的undefined错误

问题核心：无图商品的item.images可能是undefined或空数组，直接访问item.images[0].src会触发报错。以下是正确的规避方案，同时纠正你之前的判断错误：

错误原因分析 #

你之前的两种判断都存在问题：

• 第一种判断item.images == "undefined"：错误地将item.images与字符串"undefined"比较，实际无图时item.images是undefined类型，而非字符串。
• 第二种判断拼写错误img.lenght（应为length），且未先校验item.images是否存在，若item.images是undefined，访问img.length会直接报错。

正确解决方案 #

方案1：逐步校验（兼容性好） #

先逐层确认属性/数组存在，再访问src：

$.each(response, function (i, item) {
    console.log(item);  
    var gmi;
    // 依次校验：images存在 → 数组有元素 → 第一个元素有src属性
    if (item.images && item.images.length > 0 && item.images[0].src) {
        gmi = item.images[0].src;
    } else {
        gmi = "no image applied";
    }
    // 后续可使用gmi进行渲染等操作
});

方案2：可选链操作符（简洁，需ES2020+环境） #

利用ES2020的可选链?.，自动处理undefined/null的情况，再用||设置默认值：

$.each(response, function (i, item) {
    console.log(item);  
    var gmi = item.images?.[0]?.src || "no image applied";
    // 后续使用gmi
});

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