如何在ES6中获取搜索筛选数据

下面是一套ES6实现方案，核心完成两个需求：根据输入关键词筛选数据行，同时排除白名单内指定ID的条目，逻辑清晰且充分利用了ES6新特性（解构赋值、箭头函数、数组方法等）：

完整代码示例 #

// 基于字符串值筛选数据行并排除白名单条目
// 1. 生成白名单：从原数据中提取需要排除的RuleAutoID集合
const whiteList = rows.map(sel => sel.RuleAutoID); 
console.log('白名单ID集合', whiteList);

// 2. 获取搜索关键词：从输入框取值并统一转为小写，避免大小写匹配问题
let searchTerm = $('.regulationData .mendix-react-material-table .MuiInputBase-input').val().toLowerCase();
console.log('当前搜索关键词', searchTerm);

// 3. 移除白名单相关字段：将每个数据对象中的RuleAutoID字段剔除，生成新数组
let filterRows = rows.map(({ RuleAutoID, ...rest }) => rest);
console.log('移除RuleAutoID后的数据集', filterRows);

// 4. 执行筛选：过滤出包含搜索关键词的有效数据行
const filteredData = filterRows.filter(item => {
    // 先过滤掉当前对象中的空值（null/undefined/空字符串）
    const values = Object.values(item).filter(v => !(v === null || v === undefined || v === ''));
    console.log('当前行的有效字段值', values);

    // 检查是否有任意一个字符串字段包含搜索关键词
    return values.some(val => {
        console.log('当前检查的字段值', val);
        return typeof val === "string" && val.toLowerCase().includes(searchTerm);
    });
});

console.log('最终筛选结果', filteredData);

关键逻辑说明 #

• 白名单处理：通过map快速提取所有需要排除的ID，若需直接过滤掉白名单对应的整行数据，可在生成filterRows前先对原数组做一次过滤。
• 大小写兼容：将搜索关键词和待匹配字段统一转为小写，彻底避免因大小写差异导致的匹配遗漏。
• 空值过滤：提前剔除对象中的无效空值，减少无意义的匹配检查，提升筛选效率。
• 灵活匹配：使用some方法实现“只要有一个字段符合就保留该行”的逻辑，适配多字段模糊搜索场景。

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