使用Array.find遇空对象报错，如何避免该问题？

方案1：在find回调中增加空值/空对象判断 #

在访问item.id前，先确保当前项有效，避免不必要的错误：

var myArray = [
 {id:1, name:"bob"},
 {id:2, name:"dan"},
 {},
 null,
 undefined
]

// 用可选链操作符简洁处理空值（ES2020+）
var item = myArray.find(item => item?.id === 6);

// 兼容旧环境的ES5写法
// var item = myArray.find(item => item && typeof item.id !== 'undefined' && item.id === 6);

// 先判断item存在再访问属性
if (item) {
  console.log(item.name);
} else {
  console.log("未找到匹配的对象");
}

可选链操作符?.会自动处理null/undefined的情况：如果当前项是无效值，item?.id直接返回undefined，不会抛出错误；如果是空对象{}，item?.id同样返回undefined，不会匹配目标ID。

方案2：先过滤无效项再查找 #

如果数组中无效项（空对象、null、undefined）较多，可以先过滤出有效对象再执行查找：

var myArray = [
 {id:1, name:"bob"},
 {id:2, name:"dan"},
 {},
 null,
 undefined
]

// 过滤出包含id属性的有效对象
var validItems = myArray.filter(item => item?.id !== undefined);
// 在有效数组中查找目标
var item = validItems.find(item => item.id === 6);

if (item) {
  console.log(item.name);
} else {
  console.log("未找到匹配的对象");
}

关键注意点 #

无论采用哪种方案，当数组中没有匹配ID的对象时，find会返回undefined，此时直接访问item.name会抛出错误。必须先判断item是否存在，再访问其属性。

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