迹忆客 专注技术分享

如果永远不会满足回调函数中实现的条件，或者我们尚未从回调函数返回值，则 Array.find() 方法会返回未定义的值。 要解决此问题，请使用类型保护来检查 find 在访问属性或方法之前是否返回了值。

下面是发生上述错误的一个示例。

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

const result = arr.find((element) => {
  return element.id === 2;
});

// ⛔️ Object is possibly 'undefined'.ts(2532)
result.name.toUpperCase();

下面是如何解决“Object is possibly undefined”错误的方法。

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

const result = arr.find((element) => {
  return element.id === 2;
});

// 👇️ result is object or undefined here

if (result !== undefined) {
  // 👇️ result is an object here
  console.log(result.name.toUpperCase());
}

if 语句用作简单的类型保护。

TypeScript 知道 find() 方法返回数组中满足条件的第一个值，如果条件从未满足则返回未定义的值。

如果我们从结果变量存储的可能值中排除未定义，编译器可以确定该变量是一个对象。

我们传递给 Array.find 方法的函数会为数组中的每个元素调用，直到它返回真值或遍历整个数组。

如果回调函数从不返回真值，则 find() 方法返回 undefined。

find() 方法返回未定义的另一个常见原因是我们忘记从传递给 find() 的回调函数中显式返回一个值。

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

const result = arr.find((element) => {
  element.id === 2;
});

console.log(result); // 👉️ undefined

请注意 ，我们没有使用带有隐式返回的箭头函数，也没有使用 return 语句。

这意味着回调函数将在每次调用时隐式返回 undefined，最终 find() 也将返回 undefined。

确保从回调函数返回一个值，通过使用箭头函数隐式返回或通过显式使用 return 语句。

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

// 👇️ implicit return
const result = arr.find((element) => element.id === 2);

find() 方法返回未定义的替代解决方案是使用可选链接 ?.。

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

const result = arr.find((element) => element.id === 2);

// 👇️ "BOB"
console.log(result?.name.toUpperCase());

如果引用等于未定义或 null，则可选链接 ?. 运算符会短路，而不是抛出错误。

因此，如果结果变量的值为 undefined 或 null，运算符将短路并返回 undefined。

我们可以使用此方法访问可能具有未定义值或空值的深层嵌套属性，而不会出现“Object is possibly undefined”错误。