登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript实现前端数据多条件筛选功能的实例

黄舟
发布: 2018-05-29 15:05:39
原创
3907人浏览过

这篇文章主要为大家详细介绍了基于javascript实现前端数据多条件筛选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

有时候也会需要在前端进行数据筛选,增强交互体验。当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很*烦。下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置。

仿照京东的筛选条件,这里就取价格区间和品牌作为测试。

代码

代码中主要使用js的过滤器Array.prototype.filter,该方法会对数组元素进行遍历检查,返回一个符合检查条件的新数组,不会改变原数组。

// filter()
var foo = [0,1,2,3,4,5,6,7,8,9];

var foo1 = foo.filter(
 function(item) {
  return item >= 5
 }
);

console.log(foo1); // [5, 6, 7, 8, 9]
登录后复制

有了这个方法,筛选数据方便了很多,下面先定义一个商品类。

// 定义商品类
function Product(name, brand, price) {
 this.name = name; // 名称
 this.brand = brand; // 品牌
 this.price = price; // 价格
}
登录后复制

创建一个过滤器对象,把所有过滤数据的方法放在里面。为了能自动适配不同的筛选条件,将筛选条件分为两个大类,一个是区间类型rangesFilter ,如:品牌、内存等;一个是选择类型choosesFilter,如:价格、屏幕尺寸等。

不同大类同时筛选时,进行的是与逻辑,每个大类在上一个大类筛选结果上进行筛选。比如我要筛选2000-5000块的华为手机,先调用rangesFilter筛选products并返回结果result1,然后用choosesFilter筛选result1并返回结果resulte2。

当然,如果还有其它大类,不一定是与逻辑,再另行处理。

// 商品筛选器
const ProductFilters = {
 /**
  * 区间类型筛选
  * @param {array<Product>} products
  * @param {array<{type: String, low: number, high: number}>} ranges
  */
 rangesFilter: function (products, ranges) { }

 /**
  * 选择类型筛选
  * @param {array<Product>} products
  * @param {array<{type: String, value: String}>} chooses
  */
 choosesFilter: function (products, chooses) { }
}
登录后复制

区间类型的筛选,代码如下。

// 区间类型条件结构
ranges: [
  {
   type: &#39;price&#39;, // 筛选类型/字段
   low: 3000, // 最小值
   high: 6000 // 最大值
  }
 ]
登录后复制
/**
  * @param {array<Product>} products
  * @param {array<{type: String, low: number, high: number}>} ranges
  */
 rangesFilter: function (products, ranges) {
  if (ranges.length === 0) {
   return products;
  } else {
   /**
    * 循环多个区间条件,
    * 每种区间类型应该只有一个,
    * 比如价格区间不会有1000-2000和4000-6000同时需要的情况
    */
   for (let range of ranges) {
    // 多个不同类型区间是与逻辑,可以直接赋值给自身
    products = products.filter(function (item) {
     return item[range.type] >= range.low && item[range.type] <= range.high;
    });
   }
   return products;
  }
 }
登录后复制

选择类型筛选:

// 选择类型条件结构
chooses: [
  {
   type: &#39;brand&#39;,
   value: &#39;华为&#39;
  },
  {
   type: &#39;brand&#39;,
   value: &#39;苹果&#39;
  }
 ]
登录后复制
/**
  * @param {array<Product>} products
  * @param {array<{type: String, value: String}>} chooses
  */
 choosesFilter: function (products, chooses) {
  let tmpProducts = [];
  if (chooses.length === 0) {
   tmpProducts = products;
  } else {
   /**
    * 选择类型条件是或逻辑,使用数组连接concat
    */
   for (let choice of chooses) {
    tmpProducts = tmpProducts.concat(products.filter(function (item) {
     return item[choice.type].indexOf(choice.value) !== -1;
    }));
   }
  }
  return tmpProducts;
 }
登录后复制

定义一个执行函数doFilter()。

function doFilter(products, conditions) {
 // 根据条件循环调用筛选器里的方法
 for (key in conditions) {
  // 判断是否有需要的过滤方法
  if (ProductFilters.hasOwnProperty(key + &#39;Filter&#39;) && typeof ProductFilters[key + &#39;Filter&#39;] === &#39;function&#39;) {
   products = ProductFilters[key + &#39;Filter&#39;](products, Conditions[key]);
  }
 }
 return products;
}
登录后复制
// 将两种大类的筛选条件放在同一个对象里
let Conditions = {
 ranges: [
  {
   type: &#39;price&#39;,
   low: 3000,
   high: 6000
  }
 ],
 chooses: [
  {
   type: &#39;brand&#39;,
   value: &#39;华为&#39;
  }
 ]
}
登录后复制

测试

创建10个商品数据,以及筛选条件

// 商品数组
const products = [
 new Product(&#39;华为荣耀9&#39;, &#39;华为&#39;, 2299),
 new Product(&#39;华为P10&#39;, &#39;华为&#39;, 3488),
 new Product(&#39;小米MIX2&#39;, &#39;小米&#39;, 3599),
 new Product(&#39;小米6&#39;, &#39;小米&#39;, 2499),
 new Product(&#39;小米Note3&#39;, &#39;小米&#39;, 2499),
 new Product(&#39;iPhone7 32G&#39;, &#39;苹果&#39;, 4588),
 new Product(&#39;iPhone7 Plus 128G&#39;, &#39;苹果&#39;, 6388),
 new Product(&#39;iPhone8&#39;, &#39;苹果&#39;, 5888),
 new Product(&#39;三星Galaxy S8&#39;, &#39;三星&#39;, 5688),
 new Product(&#39;三星Galaxy S7 edge&#39;, &#39;三星&#39;, 3399),
];
// 筛选条件
let Conditions = {
 ranges: [
  {
   type: &#39;price&#39;,
   low: 3000,
   high: 6000
  }
 ],
 chooses: [
  {
   type: &#39;brand&#39;,
   value: &#39;华为&#39;
  },
  {
   type: &#39;brand&#39;,
   value: &#39;苹果&#39;
  }
 ]
}
登录后复制

调用函数

let result = doFilter(products, Conditions);
console.log(result);
登录后复制

输出

代码的扩展性和可维护性都很好,只要保证筛选条件中的type字段在商品数据中一致都可以筛选,比如将筛选条件改为

let Conditions = {
 ranges: [
  {
   type: &#39;price&#39;,
   low: 3000,
   high: 6000
  }
 ],
 chooses: [
  {
   type: &#39;name&#39;,
   value: &#39;iPhone&#39;
  }
 ]
}
登录后复制

输出

搜索匹配等一些地方也需要优化,是否区分大小写、是完全匹配还是模糊匹配等。

以上就是JavaScript实现前端数据多条件筛选功能的实例的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号