JavaScript中检查API返回嵌套属性是否存在的最优方案

单行直接写法 #

你之前的写法存在漏洞：如果awayTeam.record本身未定义，访问record[0]会直接抛出错误。正确的单行写法需要在每一层可能未定义的嵌套节点都加上可选链操作符?.，再配合空值合并运算符??（仅当值为null/undefined时返回默认值，比||更精准，不会误判0、''等合法 falsy 值）：

<h1> {awayTeam?.record?.[0]?.displayValue ?? "0-0"} </h1>

批量处理通用方案 #

如果有大量类似的嵌套属性需要处理，封装一个通用工具函数会更简洁：

const getNestedProp = (obj, path, defaultValue) => {
  return path.reduce((curr, key) => curr?.[key], obj) ?? defaultValue;
};

使用时只需传入目标对象、属性路径数组和默认值：

<h1> {getNestedProp(awayTeam, ['record', 0, 'displayValue'], '0-0')} </h1>

这样不管嵌套层级多深，都能统一处理，避免重复写大量?.。

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