开发小技巧：javascript的filter函数用法，结合查询条件对数据的动态过滤

1.javascript的filter函数用法

该方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

 上面代码将大于3的数组成员，作为一个新数组返回。

其他详细用法可参见：https://download.csdn.net/blog/column/10753502/119318474

 

2.结合查询条件对数据的动态过滤

现在有一个查询区域如下图，用户可在查询区域组合0~任意个查询条件，然后点击查询按钮，页面显示按照查询条件查出的数据。

 实际上有两种解决思路：

一种是前端将用户操作的查询条件值作为请求参数给到后端，由后端按照查询条件返回最终数据，前端直接显示最终数据；

一种是前端直接调用全数据查询接口获取全量数据，然后前端根据用户操作的查询条件，对全量数据进行前端显示的过滤。

我们本次使用第二种方式，核心代码如下：

  // 查询任务 (主界面的查询按钮)
    searchBtn.addEventListener('click', function () {
        const testSite = document.getElementById('searchTestSite').value;   //获取查询选定的测试场地
        const system = document.getElementById('searchSystem').value;       //获取查询选定的无人系统
        const taskDesc = document.getElementById('searchTaskDesc').value.trim().toLowerCase(); //获取查询输入的任务描述
        const status = document.getElementById('searchStatus').value;       //获取查询选定的任务状态
        const date = document.getElementById('searchDate').value;       //获取选定的下发日期  (日期选择器用的是原生的input type="date")

        // 过滤任务  (对后端获取的全数据进行过滤[最好是在重新全部调用一下,然后过滤]) tasks是后端返回的数据数组
        const filteredTasks = tasks.filter(task => {
            //对查询条件区挨个判断,只要有一项不符就剔除掉
            if (testSite && task.testSite !== testSite) return false;
            if (system && task.system !== system) return false;
            if (taskDesc && !task.title.toLowerCase().includes(taskDesc)) return false;  //模糊查询,看是否包含  (实际是前端控制)
            if (status && task.status !== status) return false;
            if (date) {
                const taskDate = task.dispatchTime.split(' ')[0];//后台的时间格式分割需要注意,取前面yyyy-MM-dd
                if (taskDate !== date) return false;
            }
            return true;
        });

        // 渲染过滤后的任务
        renderCards(filteredTasks);
    });