如何在嵌套数组中按子字符串模糊匹配筛选数据-js教程-PHP中文网

如何在嵌套数组中按子字符串模糊匹配筛选数据

本文讲解如何对二维数组（数组的数组）进行子字符串搜索，解决 filter() 原生 includes() 仅支持全字匹配的问题，通过 some() + indexOf() 实现模糊查找，并兼容字符串与对象混合结构。

本文讲解如何对二维数组（数组的数组）进行子字符串搜索，解决 `filter()` 原生 `includes()` 仅支持全字匹配的问题，通过 `some()` + `indexof()` 实现模糊查找，并兼容字符串与对象混合结构。

在实际开发中（如带搜索功能的图库、卡片列表等），我们常遇到类似结构：一个外层数组包含多个子数组，每个子数组内既有字符串元素，也可能有对象（如 { text: "...", image: "..." }）。当用户在搜索框输入内容（如 "goo"）时，期望匹配 "goodbye" 这类包含该子串的项——但直接使用 array.includes(searchimp) 无法满足，因为它只做严格相等判断，不支持子串搜索。

正确做法是：对外层数组调用 filter()，对每个子数组调用 some() 遍历其所有元素；对每个元素，先判断类型（typeof el === 'string'），再用 el.indexOf(searchimp) > -1 判断是否包含目标子串。some() 一旦找到匹配即返回 true，触发外层 filter() 保留该子数组。

以下是优化后的完整示例代码：

const Arrays = [
  [
    { text: " first ", image: "1.jpg" },
    " hello", " world", " ",
  ],
  [
    { text: " second", image: "https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" },
    " goodbye", " world", " ",
  ],
  [
    { text: " Salut", image: "bass.jpg" },
    " Ca va", " au revoir", " ",
  ],
];

// 模拟搜索输入（实际项目中应从 input 元素获取）
const searchimp = "goo"; // 或 document.getElementById('searchBar').value.trim()

const showArrays = Arrays.filter(array =>
  array.some(el => 
    typeof el === 'string' && el.includes(searchimp)
  )
);

console.log(showArrays); // 输出：[[{text:" second",...}, " goodbye"," world"," "]]

✅ 关键改进点说明：

TTS Free Online免费文本转语音

一款在线免费文本转语音工具，可将输入的文字转换成语音，并提供包括普通话和部分方言在内的多种声音选择。

下载

使用 el.includes(searchimp) 替代 indexOf(...) > -1 —— 更简洁、语义更清晰（ES6+ 支持，现代浏览器及 Node.js 环境均兼容）；
some() 天然适配“是否存在任一匹配项”的逻辑，比手动 for 循环或 find() 更语义化；
类型守卫 typeof el === 'string' 避免对对象调用 .includes() 报错（如 undefined.includes is not a function）；
若需同时搜索对象中的 text 字段（例如输入 "sec" 也应匹配 { text: " second" }），可扩展为：

array.some(el => {
  if (typeof el === 'string') return el.includes(searchimp);
  if (el && typeof el === 'object' && typeof el.text === 'string') {
    return el.text.includes(searchimp);
  }
  return false;
})

⚠️ 注意事项：