React Native：如何按搜索字符串的每个字符实现数组多条件过滤

原代码与需求说明 #

原代码仅能匹配包含完整搜索字符串的水果名称，现在需要实现：当输入如ae这类多字符时，筛选出**同时包含所有字符（顺序不限）**的项。

原代码：

function Test() {
  const txt = 'a'
  const fruit = [
    { name: 'apple' },
    { name: 'orange' },
    { name: 'kiwi' },
    { name: 'banana' },
    { name: 'lemon' },
  ]

  return (
    <FlatList
      data={fruit.filter((item) => String(item.name).includes(txt))}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  )
}

export default Test

修改后的实现代码 #

function Test() {
  const txt = 'ae'
  const fruit = [
    { name: 'apple' },
    { name: 'orange' },
    { name: 'kiwi' },
    { name: 'banana' },
    { name: 'lemon' },
  ]

  // 将搜索字符串拆分为单个字符数组
  const searchChars = txt.split('')

  return (
    <FlatList
      data={fruit.filter((item) => {
        const name = String(item.name).toLowerCase()
        // 验证每个搜索字符都存在于水果名称中
        return searchChars.every(char => name.includes(char.toLowerCase()))
      })}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  )
}

export default Test

关键修改点 #

• 用txt.split('')将搜索字符串拆分为单个字符数组，比如'ae'会转为['a', 'e']
• 使用数组的every()方法，确保所有拆分后的字符都能在水果名称中找到
• 统一转为小写的处理是可选的，用于实现不区分大小写的匹配，不需要可直接删除该逻辑

测试结果 #

当txt = 'ae'时，输出为：

apple
orange

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