react实现多条件搜索——可模糊搜索

const filter =
      (condition, data) => {
          return data.filter
            ((item: { [x: string]: any }) => {
                return Object.keys
                    (condition).every((key) => {
                      return String(item[key])
                        .toLowerCase()
                            .includes(String(condition[key]).trim().toLowerCase());
                    });
              });
        };

当你需要根据某个条件筛选数据时,上面的代码提供了一个通用的过滤函数。这个函数接受两个参数:conditiondatacondition是一个包含筛选条件的对象,data是要进行筛选的数据数组

  • 第1行:定义了一个名为 filter 的常量,它是一个函数。
  • 第2行:filter 函数接受 condition 和 data 两个参数。
  • 第3行:调用 data 数组的 filter 方法,对每个元素执行筛选操作。
  • 第4行:对于每个元素 item,使用箭头函数定义筛选条件。
  • 第5行:使用 Object.keys() 方法获取 condition 对象的所有键。
  • 第6行:对于 condition 的每个键 key,使用 Array.prototype.every() 方法来判断是否每个键值对都满足条件。
  • 第7行:将 item[key] 转换为字符串,并转换为小写字母。
  • 第8行:使用 String.prototype.includes() 方法检查字符串中是否包含了筛选条件的值。
  • 第9行:返回当前键值对的筛选结果。
  • 第10行:返回最终的筛选结果数组。

使用实例:

const text = "example";
const msg = {
  data: [
    { name: "John Doe", age: 25 },
    { name: "Jane Smith", age: 30 },
    { name: "Bob Johnson", age: 35 },
  ],
};

const search_list = filter({ name: text }, msg.data);
console.log(search_list);

以上代码将根据 name 属性进行筛选,筛选条件为 text 变量的值。最终输出符合条件的结果数组。

你可能感兴趣的:(react.js,前端,javascript)