访问JavaScript对象不存在的键后接下标时如何避免报错返回undefined？

报错原因 #

该报错是JavaScript的底层规则决定的：访问对象不存在的键时会返回undefined，但undefined不属于对象/数组类型，不支持读取属性或下标，因此对undefined执行[0]操作时会直接抛出类型错误。

解决方案 #

常用的实现方式如下，均可做到返回undefined而非抛出错误： #

1. 可选链操作符（最推荐，ES2020+支持）

使用?.操作符，会在左侧值为undefined/null时直接短路返回undefined，不会继续执行后续的属性/下标读取操作：

var animals = {
  "mammals": ["Cat", "Dog", "Cow"]
};
var groupA = animals.mammals[0];
var groupB = animals.birds?.[0]; // 用可选链访问下标

console.log(groupA); // 输出Cat
console.log(groupB); // 输出undefined，无报错

2. 逻辑与短路判断（兼容旧版JS环境）

如果需要兼容不支持ES2020的旧环境，可以用&&做短路判断，只有前面的animals.birds为真值时才会执行后面的下标读取：

var groupB = animals.birds && animals.birds[0];

3. 显式条件判断

也可以通过if语句提前判断目标键是否存在，再执行下标读取：

var groupB;
if (animals.birds) {
  groupB = animals.birds[0];
}
// 未进入if分支时groupB默认就是undefined

内容的提问来源于stack exchange，提问作者saya-ma