js filter,every,includes 过滤数组

加油鸭老王

已于 2024-02-19 11:04:32 修改

阅读量502

点赞数 3

文章标签： javascript 前端

于 2024-02-19 10:44:56 首次发布

本文链接：https://blog.csdn.net/weixin_42400404/article/details/136164871

版权

本文讲述了在前端项目中，由于后端接口设计，前端需在页面上实现筛选功能。通过filter,every和includes方法，对从接口获取的大量数据进行高效筛选。作者分享了两个实例，并提到初次遇到这类需求时的经验和对基础知识的反思。

摘要由CSDN通过智能技术生成

背景：

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

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

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

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

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

案例一

  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,否则返回false
        return 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的处理思路，请教了同事后才解决，自己的基础知识还需要打磨。