较为完善的搜刮函数

当执行多条件搜刮的时候，我利用的是filter封装的函数，封装函数的代码可以提升我们代码的可读性以及可复用性，同时封装的越好，利用起来越轻便，以下是我封装的一个利用filter封装的多条件搜刮函数，同时也留意了对空值的处理
 

1. function multiConditionSearch(data, conditions) {
2.   // 根据sessionStorage中的change_id来选择不同的数据源
4.     data = globalData;
5.   // 取消所有复选框的选中状态
6.   $(".notice_nav .checkbox_id input").prop("checked", false);
8.   // 辅助函数，用于获取嵌套对象的值
9.   function getNestedValue(obj, path) {
10.     const parts = path.split(".");
11.     return parts.reduce((current, key) => {
12.       return current && current[key] !== undefined ? current[key] : null;
13.     }, obj);
14.   }
16.   // 过滤掉无效的条件
17.   const validConditions = Object.fromEntries(
18.     Object.entries(conditions).filter(([_, value]) => {
19.       if (typeof value === "object" && !Array.isArray(value)) {
20.         if ("like" in value) {
21.           return value.like.trim() !== "";
22.         } else if ("start" in value && "end" in value) {
23.           return value.start.trim() !== "" || value.end.trim() !== "";
24.         }
25.       }
26.       return (
27.         value !== null && value !== undefined && String(value).trim() !== ""
28.       );
29.     })
30.   );
32.   // 根据有效条件过滤数据
33.   const searchResult = data.filter((item) => {
34.     return Object.keys(validConditions).every((key) => {
35.       const condition = validConditions[key];
36.       // 获取嵌套属性的值
37.       const itemValue = getNestedValue(item, key);
39.       if (typeof condition === "object" && !Array.isArray(condition)) {
40.         if (condition.start && condition.end) {
41.           const itemTime = new Date(itemValue).getTime();
42.           const startTime = new Date(condition.start).getTime();
43.           const endTime = new Date(condition.end).getTime();
44.           return itemTime >= startTime && itemTime <= endTime;
45.         } else if (condition.like) {
46.           if (typeof itemValue === "string") {
47.             return itemValue
48.               .toLowerCase()
49.               .includes(condition.like.toLowerCase());
50.           }
51.           return false;
52.         }
53.       } else {
54.         return itemValue === condition;
55.       }
56.     });
57.   });
59.   // 调用 render 函数进行数据渲染
60.   page = 0;
61.   
62.     render(searchResult);
63.   return searchResult;}

复制代码

该函数可以放在公共界面，在其他页面调用

1. conditions = {
2.       name: { like: $("#drug_name").val() },
4.       create_time: { start: $("#start_date").val(), end: $("#end_date").val() },
5.     };
6.     data = multiConditionSearch(data, conditions);

复制代码

在页面上调用仅仅需要设置不同的类名用以匹配对应的数据即可，后续的赋值则是确保分页在点击的时候可以获取到正确的数据，而不是错误的全局数据，同时我的函数也可以处理嵌套的数据，关键函数即

1. // 辅助函数，用于获取嵌套对象的值
2.   function getNestedValue(obj, path) {
3.     const parts = path.split(".");
4.     return parts.reduce((current, key) => {
5.       return current && current[key] !== undefined ? current[key] : null;
6.     }, obj);
7.   }

复制代码

用于提取嵌套的数据格式，类似于

1. const obj = {
2.   a: {
3.     b: {
4.       c: "Hello, World!"
5.     }
6.   }
7. };
9. // 使用 getNestedValue 获取值
10. const result1 = getNestedValue(obj, "a.b.c");
11. console.log(result1);  // 输出: "Hello, World!"
13. // 路径无效的示例
14. const result2 = getNestedValue(obj, "a.x.y");
15. console.log(result2);  // 输出: null
17. // 路径部分为 null 或 undefined 的示例
18. const result3 = getNestedValue(obj, "a.b.c.d");
19. console.log(result3);  // 输出: null

复制代码

通过这个函数，我可以处理现在我遇到的各种多条件搜刮，且并不影响太多性能的同时，可以随时通过增加筛选条件来适配更多的条件筛选

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。