JavaScript调用API返回null导致数组赋值报错如何替换为静态值

代码中断的核心原因是当primaryTag、category这类父级属性为null时，直接访问其.name子属性会抛出类型错误，可通过空值校验加预设兜底值的方式解决，具体修改如下：

步骤1：提前定义预设静态值 #

可根据业务需求自行调整各字段的兜底默认值：

// 放在循环外全局位置即可
const DEFAULT_VALUES = {
  title: '无标题',
  pubDate: '1970-01-01',
  link: '',
  imageURL: '自定义占位图地址',
  description: '暂无内容描述',
  category: '未分类',
  audience: '未知受众-0',
  tag: '无标签',
  episerverId: ''
}

步骤2：修改对象赋值逻辑 #

使用ES2020新增的**可选链运算符?.和空值合并运算符??**做非空校验和兜底：

// 循环条件做了优化，避免posts返回长度不足11时出现数组越界报错
for (i = 0; i < Math.min(posts.length, 11); i++) {
  articlesList_json.push({
    "title": posts[i].title ?? DEFAULT_VALUES.title, 
    "pubDate": posts[i].publishedDate ?? DEFAULT_VALUES.pubDate, 
    "link": posts[i].url ?? DEFAULT_VALUES.link, 
    "imageURL": posts[i].imageUrl ?? DEFAULT_VALUES.imageURL, 
    "description": posts[i].description ?? DEFAULT_VALUES.description,
    "category": posts[i].category?.name ?? DEFAULT_VALUES.category,
    "audience": posts[i].audience ? `${posts[i].audience.name}-${posts[i].audience.id}` : DEFAULT_VALUES.audience,
    "tag": posts[i].primaryTag?.name ?? DEFAULT_VALUES.tag,
    "episerverId": posts[i].episerverId ?? DEFAULT_VALUES.episerverId,
  });
} 

低版本JS环境兼容写法 #

如果运行环境不支持ES2020新语法，改用传统的三元运算符实现即可：

// 举个例子，其他需要判断父级属性的字段同理修改
"tag": posts[i].primaryTag ? posts[i].primaryTag.name : DEFAULT_VALUES.tag,
"category": posts[i].category ? posts[i].category.name : DEFAULT_VALUES.category,

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