广州技术支持:奇亿网站建设,你认为网络营销是什么,陕西省建设协会岗位证查询网站,网站开发实现编码背景#xff1a; 页面#xff1a;在项目中遇到的#xff0c;前端页面显示为#xff0c;顶部是下拉搜索条件,下面是一个表格#xff1b; 数据#xff1a;接口请求一次性拿到所有#xff1a;搜索条件里的下拉选项和表格中的数据#xff1b; 现状#xff1a;需要前端在搜…背景 页面在项目中遇到的前端页面显示为顶部是下拉搜索条件,下面是一个表格 数据接口请求一次性拿到所有搜索条件里的下拉选项和表格中的数据 现状需要前端在搜索条件时筛选表格数据展示在前端进行筛选 为什么不在后端进行筛选 答在某个页面中接口已经把所有进行数据都返回前端展示了现在的页面只是多了筛选查看后端不想再提供接口让前端还是调用之前的接口进行处理。 案例一 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的处理思路请教了同事后才解决自己的基础知识还需要打磨。
