JS遍历API返回的JavaScript对象时price.text读取报错如何解决

问题原因 #

• 报错Cannot read properties of undefined (reading 'text')的核心原因是部分返回的equipment产品对象没有price字段：你贴出的API示例只是其中一条带price属性的条目，实际接口返回的148条数据里，存在部分产品未上传价格、或价格为待询价状态的情况，此时product.price的值为undefined，直接访问product.price.text就会触发类型错误。
• 其余字段可以正常访问是因为这些字段是接口的必填返回字段，所有产品条目都存在对应值，不会出现undefined的情况。

解决方法 #

把报错行的${product.price.text}替换为带空值兜底的写法即可，有两种常用方案：

方案1：ES2020+ 可选链+空值合并（推荐） #

${product.price?.text ?? '价格面议'}

此处?.会先判断product.price是否存在，存在才会继续读取text属性；如果price不存在或者text为空，就会返回兜底的价格面议，你也可以替换为需要的默认内容比如空字符串。

方案2：兼容旧环境的逻辑判断写法 #

如果运行环境不支持可选链语法，可以用三元判断实现同样效果：

${product.price ? product.price.text : '价格面议'}

额外优化提示：你代码中遍历用的map方法仅用来做循环、不需要返回新数组的场景下，更适合用forEach方法，避免无意义的数组创建浪费性能。

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