欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JavaScript實現(xiàn)前端數(shù)據(jù)多條件篩選功能

 更新時間：2020年08月19日 11:39:12   作者：joenlee  
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)前端數(shù)據(jù)多條件篩選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

有時候也會需要在前端進行數(shù)據(jù)篩選，增強交互體驗。當數(shù)據(jù)可用的篩選條件較多時，把邏輯寫死會給后期維護帶來很大麻煩。下面是我自己寫的一個簡單的篩選器，篩選條件可以根據(jù)數(shù)據(jù)包含的字段動態(tài)設置。

仿照京東的篩選條件，這里就取價格區(qū)間和品牌作為測試。

代碼

代碼中主要使用js的過濾器Array.prototype.filter，該方法會對數(shù)組元素進行遍歷檢查，返回一個符合檢查條件的新數(shù)組，不會改變原數(shù)組。

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

有了這個方法，篩選數(shù)據(jù)方便了很多，下面先定義一個商品類。

// 定義商品類
function Product(name, brand, price) {
 this.name = name; // 名稱
 this.brand = brand; // 品牌
 this.price = price; // 價格
}

創(chuàng)建一個過濾器對象，把所有過濾數(shù)據(jù)的方法放在里面。為了能自動適配不同的篩選條件，將篩選條件分為兩個大類，一個是區(qū)間類型rangesFilter ，如：品牌、內(nèi)存等；一個是選擇類型choosesFilter，如：價格、屏幕尺寸等。

不同大類同時篩選時，進行的是與邏輯，每個大類在上一個大類篩選結果上進行篩選。比如我要篩選2000-5000塊的華為手機，先調(diào)用rangesFilter篩選products并返回結果result1，然后用choosesFilter篩選result1并返回結果resulte2。

當然，如果還有其它大類，不一定是與邏輯，再另行處理。

// 商品篩選器
const ProductFilters = {
 /**
 * 區(qū)間類型篩選
 * @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) { }
}

區(qū)間類型的篩選，代碼如下。

// 區(qū)間類型條件結構
ranges: [
 {
  type: 'price', // 篩選類型/字段
  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 {
  /**
  * 循環(huán)多個區(qū)間條件，
  * 每種區(qū)間類型應該只有一個，
  * 比如價格區(qū)間不會有1000-2000和4000-6000同時需要的情況
  */
  for (let range of ranges) {
  // 多個不同類型區(qū)間是與邏輯，可以直接賦值給自身
  products = products.filter(function (item) {
   return item[range.type] >= range.low && item[range.type] <= range.high;
  });
  }
  return products;
 }
 }

選擇類型篩選：

// 選擇類型條件結構
chooses: [
 {
  type: 'brand',
  value: '華為'
 },
 {
  type: 'brand',
  value: '蘋果'
 }
 ]

/**
 * @param {array<Product>} products
 * @param {array<{type: String, value: String}>} chooses
 */
 choosesFilter: function (products, chooses) {
 let tmpProducts = [];
 if (chooses.length === 0) {
  tmpProducts = products;
 } else {
  /**
  * 選擇類型條件是或邏輯，使用數(shù)組連接concat
  */
  for (let choice of chooses) {
  tmpProducts = tmpProducts.concat(products.filter(function (item) {
   return item[choice.type].indexOf(choice.value) !== -1;
  }));
  }
 }
 return tmpProducts;
 }

定義一個執(zhí)行函數(shù)doFilter()。

function doFilter(products, conditions) {
 // 根據(jù)條件循環(huán)調(diào)用篩選器里的方法
 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: '華為'
 }
 ]
}

測試

創(chuàng)建10個商品數(shù)據(jù)，以及篩選條件

// 商品數(shù)組
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: '蘋果'
 }
 ]
}

調(diào)用函數(shù)

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

輸出

代碼的擴展性和可維護性都很好，只要保證篩選條件中的type字段在商品數(shù)據(jù)中一致都可以篩選，比如將篩選條件改為

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

輸出

搜索匹配等一些地方也需要優(yōu)化，是否區(qū)分大小寫、是完全匹配還是模糊匹配等。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論