网站导航设计法则企业全网推广公司

背景：

     页面：在项目中遇到的，前端页面显示为，顶部是下拉搜索条件,下面是一个表格；

     数据：接口请求一次性拿到所有：搜索条件里的下拉选项和表格中的数据；

     现状：需要前端在搜索条件时，筛选表格数据展示，在前端进行筛选；

    为什么不在后端进行筛选？

    答：在某个页面中，接口已经把所有进行数据都返回前端展示了，现在的页面只是多了筛选查看，后端不想再提供接口，让前端还是调用之前的接口进行处理。

  案例一

  let arr = [{type: 'uddaas,xiao',name: '红色,小',},{type: 'ffoop,da',name: '黄色,大',},{type: 'hhhugd,da',name: '绿色,大',},]console.log('原始数据：', arr)let str1 = ['ffoop','da']

   先过滤，再把指定字符串转换为数组，再通过数组比对，返回true或false,查找到对应的数据；

  let results1 = arr.filter( (v) => {// filter过滤数组// 字符串转换数组let typesId = v.type.split(',') return str1.every((e) => {// every查找符合的元素// includes判断数组是否包含指定的值，有则返回true,否则返回falsereturn typesId.includes(e)})})console.log('results1:',results1)
//     {
//     "type": "ffoop,da",
//     "name": "黄色,大"
// }

    案例二
   

 let arr1 = [12,13,14,15,16]let iniArr = []let arr2 = [1000,2000,3000]let obj1 = [{arr: [1000,2000,3000],title: '数字信息',},{arr: [1100,2100,3100],title: '数字信息1',},{arr: [1200,2200,3200],title: '数字信息2',},]

     通过filter过滤,在过滤中使用every查找，并通过includes验证是否有符合的数据，有则返回true,否则返回false
  

  let filterObj = obj1.filter((v1) => {return iniArr.every((e1) => {return v1.arr.includes(e1)})})console.log('filterObj:',filterObj)  // {//     "arr": [//         1100,//         2100,//         3100//     ],//     "title": "数字信息1"// }

不足：在写这部分需求时，花费了较长时间，没有想到filter,every和includes的处理思路，请教了同事后才解决，自己的基础知识还需要打磨。