Detailed explanation of JavaScript front-end data multi-condition filtering function implementation

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.

Sometimes it is also necessary to perform multi-condition filtering on the front-end. Perform data filtering to enhance 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.

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]

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; // 价格
}

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} products
  * @param {array<{type: String, low: number, high: number}>} ranges
  */
 rangesFilter: function (products, ranges) { }

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

Interval type filtering, the code is as follows.

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

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

Select type filter:

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

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

Define an execution function doFilter().

function doFilter(products, conditions) {
 // 根据条件循环调用筛选器里的方法
 for (key in conditions) {
  // 判断是否有需要的过滤方法
  if (ProductFilters.hasOwnProperty(key + 'Filter') && typeof ProductFilters[key + 'Filter'] === 'function') {
   products = ProductFilters[key + 'Filter'](products, Conditions[key]);
  }
 }
 return products;
}

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

Test

Create 10 product data and filter conditions

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

Call function

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

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: 'price',
   low: 3000,
   high: 6000
  }
 ],
 chooses: [
  {
   type: 'name',
   value: 'iPhone'
  }
 ]
}

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.

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