JavaScript front-end data multi-condition filtering function implementation code-JS Tutorial-php.cn

Sometimes it is necessary to filter data on the front end to enhance the interactive experience. When there are many filtering conditions available for data, hard-coding the logic will cause trouble in later maintenance. Below is a simple filter I wrote myself. The filter conditions can be set dynamically based on the fields contained in the data. This article mainly introduces the multi-condition filtering function of front-end data based on JavaScript in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Imitating JD.com’s filtering conditions, here we take the price range and brand as a test.

Code

The code mainly uses the js filter Array.prototype.filter, which will traverse the array elements. Check, return a new array that meets the check conditions, and the original array will not be changed.

// 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]

Copy after login

With this method, it is much easier to filter data. Let’s first define a product category.

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

Copy after login

Create a filter object and put all methods for filtering data in it. In order to automatically adapt to different filtering conditions, the filtering conditions are divided into two major categories. One is the range type rangesFilter, such as brand, memory, etc.; the other is the selection type choosesFilter, such as: price, screen size, etc.

When different categories are screened at the same time, AND logic is used. Each category is screened based on the screening results of the previous category. For example, if I want to filter Huawei mobile phones priced between 2000 and 5000, I first call rangesFilter to filter products and return result1, and then use choosesFilter to filter result1 and return result2.

Of course, if there are other major categories, not necessarily logical, they will be dealt with separately.

// 商品筛选器
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) { }
}

Copy after login

Interval type filtering, the code is as follows.

// 区间类型条件结构
ranges: [
  {
   type: &#39;price&#39;, // 筛选类型/字段
   low: 3000, // 最小值
   high: 6000 // 最大值
  }
 ]

Copy after login

/**
  * @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;
  }
 }

Copy after login

Select type filter:

// 选择类型条件结构
chooses: [
  {
   type: &#39;brand&#39;,
   value: &#39;华为&#39;
  },
  {
   type: &#39;brand&#39;,
   value: &#39;苹果&#39;
  }
 ]

Copy after login

/**
  * @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;
 }

Copy after login

Define an execution function 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;
}

Copy after login

// 将两种大类的筛选条件放在同一个对象里
let Conditions = {
 ranges: [
  {
   type: &#39;price&#39;,
   low: 3000,
   high: 6000
  }
 ],
 chooses: [
  {
   type: &#39;brand&#39;,
   value: &#39;华为&#39;
  }
 ]
}

Copy after login

Test

Create 10 product data and filter conditions

// 商品数组
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;
  }
 ]
}

Copy after login

Call function

1 2	`let result = doFilter(products, Conditions);` `console.log(result);`

Copy after login

Output

code The scalability and maintainability are very good. As long as the type field in the filtering conditions is consistent in the product data, you can filter. For example, change the filtering conditions to

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

Copy after login

Output

# Search matching and other places also need to be optimized, whether it is case-sensitive, whether it is an exact match or a fuzzy match, etc.

Related recommendations:

Angularjs implements select drop-down box sample code with search and filter function

How to implement something similar to Taobao in PHP Filtering function

Example analysis of table content filtering function based on jquery_jquery

The above is the detailed content of JavaScript front-end data multi-condition filtering function implementation code. For more information, please follow other related articles on the PHP Chinese website!