如何在find方法中处理逻辑，避免访问返回结果第0位时触发undefined错误

问题场景 #

现有对象及查找逻辑如下：

const People = {
    groupA : ['Amy','Beth'],
    groupB : ['Ben','Matt'],
    groupC : ['Jen','Eli'], 
};

// 匹配到值时正常返回分组名
const Person = Object.entries(People).find(([,values])=>values.includes('Amy'))[0]
console.log(Person) // output 'groupA'

// 无匹配值时抛出"Cannot read properties of undefined (reading '0')"错误，期望返回undefined
const Person1 = Object.entries(People).find(([,values])=>values.includes('Brad'))[0]

解决方案 #

1. 先存结果再判断取值 #

先捕获find的返回结果，再根据结果是否存在决定是否取键名，避免直接链式调用报错：

const getGroupByName = (name) => {
  const matchedEntry = Object.entries(People).find(([, values]) => values.includes(name));
  return matchedEntry ? matchedEntry[0] : undefined;
};

console.log(getGroupByName('Amy'));  // groupA
console.log(getGroupByName('Brad')); // undefined

2. 使用可选链操作符（ES2020及以上支持） #

利用可选链?.特性，当左侧值为undefined时直接返回undefined，不会尝试读取后续属性：

const Person1 = Object.entries(People).find(([,values])=>values.includes('Brad'))?.[0]
console.log(Person1) // undefined

3. 解构赋值+默认空数组 #

通过|| []给find的结果设置默认空数组，即使无匹配结果，解构取索引0时也只会得到undefined：

const [Person1] = Object.entries(People).find(([,values])=>values.includes('Brad')) || [];
console.log(Person1) // undefined

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