使用typeof仍报读取undefined属性TypeError，有什么更好的处理方案？

你遇到的报错本质是属性访问的层级校验不全：报错触发在读取cardArray[i]['special']的阶段，你的typeof判断只校验了special属性是否为undefined，但**cardArray[i]本身已经是undefined了**，对undefined值读取任意属性都会直接抛出这个类型错误，根本走不到后续的typeof判断逻辑。
常见的触发场景包括：

• 循环下标i超出了cardArray的实际长度
• cardArray对应下标i的位置本身存储的就是undefined/null这类空值

1. 优先使用可选链（ES2020+兼容，当前绝大多数浏览器、Node.js版本都支持） #

可选链操作符?.会自动检测链上的每一层值是否为undefined/null，遇到空值会直接返回undefined，不会抛出错误，写法非常简洁：

// 校验special属性存在且值不为undefined
if (cardArray[i]?.special !== undefined) {
  // 执行对应逻辑
}

如果需要判断的是「属性是否本身存在（哪怕属性值为undefined）」，可以搭配hasOwnProperty使用：

if (cardArray[i]?.hasOwnProperty('special')) {
  // 执行对应逻辑
}

如果属性层级更深，可选链的优势会更明显，不需要逐层写判断：

// 比如要校验 cardArray[i].user.config.special
if (cardArray[i]?.user?.config?.special !== undefined) {
  // 执行对应逻辑
}

2. 兼容老旧环境的逐层校验方案 #

如果你的运行环境不支持ES2020，需要手动逐层校验上层值是否存在：

// 先校验cardArray[i]不为undefined，再校验special属性
if (typeof cardArray[i] !== 'undefined' && typeof cardArray[i].special !== 'undefined') {
  // 执行对应逻辑
}

// 也可以简化写，只要cardArray[i]不会是0、空字符串、false这类合法的假值，可以直接判断真值：
if (cardArray[i] && 'special' in cardArray[i]) {
  // 执行对应逻辑
}

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