JavaScript中接收数据为undefined时如何正确赋值null

你的判断逻辑只校验了item.images[0].url本身是否为undefined，没有覆盖无图场景下更上游的异常情况，代码在执行到判断条件之前就会抛出错误中断运行：

• 当商品完全没有返回图片字段时，item.images本身就是undefined，直接通过下标访问item.images[0]会抛出Cannot read properties of undefined (reading '0')错误
• 当商品返回了images字段但值为空数组时，item.images[0]是undefined，继续访问.url属性会抛出Cannot read properties of undefined (reading 'url')错误
  这两种场景下，你写的三元判断根本没有机会执行，自然达不到兜底效果。

根据你的运行环境兼容要求，可以选以下两种写法：

• 通用兼容写法（适配所有JS运行环境）：逐层校验访问链路的每一级是否存在，任意一级缺失就兜底为null

let productData = {
  productId: item.id, 
  title: item.title,
  price: item.price.now,
  unitSize: item.price.unitSize,
  productLink: item.link,
  productImage: item.images && item.images.length > 0 && item.images[0].url ? item.images[0].url : null,
  availableOnline: item.availableOnline
}
productsArray.push(productData)

• 简洁写法（ES2020及以上环境支持，目前Node.js 14+、现代浏览器均原生兼容）：用可选链+空值合并操作符实现自动短路判断，代码更简洁

let productData = {
  productId: item.id, 
  title: item.title,
  price: item.price.now,
  unitSize: item.price.unitSize,
  productLink: item.link,
  productImage: item.images?.[0]?.url ?? null,
  availableOnline: item.availableOnline
}
productsArray.push(productData)

补充说明：以上两种写法同时兼容图片url为空字符串的异常场景，不会把无效的空链接存入最终数组。

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