如何过滤含缺失键的对象数组？避免报错并返回匹配结果

需要根据用户输入过滤对象数组，基于name、location、address三个键的值进行筛选，但部分对象缺少其中部分键，当前代码执行时会报错，希望忽略无对应键的对象，正常返回匹配结果。

示例数据：

const data = [
  {
    name: "John Miller",
    age: 33,
    location: "Chicago",
    address: '1 help street'
  },
  {
    name: "Jane Doe",
    age: 78,
    address: '1 help me please lane'
  },
  {
    name: "Jamie Stevens",
    location: "San Diego",
    age: 32
  }
]

注：第二个对象无location键，第三个对象无address键。

当前处理函数：

const handleSearch = (query) => {
    const keys = ['name', 'location', 'address']
    const filter =  data.filter((row) => (
      keys.some((key) => (row[key].toLowerCase().includes(query))
    )))
    setFilteredData(filter)
  }

解决方案 #

报错原因是当对象没有对应键时，row[key]返回undefined，调用toLowerCase()会触发错误。只需在匹配前先判断键是否存在且对应值为字符串类型，即可解决问题：

修改后的代码：

const handleSearch = (query) => {
  const keys = ['name', 'location', 'address'];
  const lowerQuery = query.toLowerCase();
  const filter = data.filter((row) => 
    keys.some((key) => {
      const value = row[key];
      return typeof value === 'string' && value.toLowerCase().includes(lowerQuery);
    })
  );
  setFilteredData(filter);
}

关键说明 #

• 通过typeof value === 'string'同时处理“键不存在”和“键对应值非字符串”的情况，避免报错。
• 提前将query转为小写，减少循环内的重复转换操作，提升性能。
• some方法会在找到第一个匹配项时停止遍历，保证筛选效率。

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