基于JavaScript實(shí)現(xiàn)前端數(shù)據(jù)多條件篩選功能
有時(shí)候也會(huì)需要在前端進(jìn)行數(shù)據(jù)篩選，增強(qiáng)交互體驗(yàn)。當(dāng)數(shù)據(jù)可用的篩選條件較多時(shí)，把邏輯寫死會(huì)給后期維護(hù)帶來(lái)很大麻煩。下面是我自己寫的一個(gè)簡(jiǎn)單的篩選器，篩選條件可以根據(jù)數(shù)據(jù)包含的字段動(dòng)態(tài)設(shè)置。
仿照京東的篩選條件，這里就取價(jià)格區(qū)間和品牌作為測(cè)試。
代碼
代碼中主要使用js的過(guò)濾器Array.prototype.filter，該方法會(huì)對(duì)數(shù)組元素進(jìn)行遍歷檢查，返回一個(gè)符合檢查條件的新數(shù)組，不會(huì)改變?cè)瓟?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]
有了這個(gè)方法，篩選數(shù)據(jù)方便了很多，下面先定義一個(gè)商品類。
// 定義商品類
function Product(name, brand, price) {
this.name = name; // 名稱
this.brand = brand; // 品牌
this.price = price; // 價(jià)格
}
創(chuàng)建一個(gè)過(guò)濾器對(duì)象，把所有過(guò)濾數(shù)據(jù)的方法放在里面。為了能自動(dòng)適配不同的篩選條件，將篩選條件分為兩個(gè)大類，一個(gè)是區(qū)間類型rangesFilter ，如：品牌、內(nèi)存等；一個(gè)是選擇類型choosesFilter，如：價(jià)格、屏幕尺寸等。
不同大類同時(shí)篩選時(shí)，進(jìn)行的是與邏輯，每個(gè)大類在上一個(gè)大類篩選結(jié)果上進(jìn)行篩選。比如我要篩選2000-5000塊的華為手機(jī)，先調(diào)用rangesFilter篩選products并返回結(jié)果result1，然后用choosesFilter篩選result1并返回結(jié)果resulte2。
當(dāng)然，如果還有其它大類，不一定是與邏輯，再另行處理。
// 商品篩選器
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ū)間類型條件結(jié)構(gòu)
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)多個(gè)區(qū)間條件，
* 每種區(qū)間類型應(yīng)該只有一個(gè)，
* 比如價(jià)格區(qū)間不會(huì)有1000-2000和4000-6000同時(shí)需要的情況
*/
for (let range of ranges) {
// 多個(gè)不同類型區(qū)間是與邏輯，可以直接賦值給自身
products = products.filter(function (item) {
return item[range.type] >= range.low && item[range.type] <= range.high;
});
}
return products;
}
}
選擇類型篩選：
// 選擇類型條件結(jié)構(gòu)
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;
}
定義一個(gè)執(zhí)行函數(shù)doFilter()。
function doFilter(products, conditions) {
// 根據(jù)條件循環(huán)調(diào)用篩選器里的方法
for (key in conditions) {
// 判斷是否有需要的過(guò)濾方法
if (ProductFilters.hasOwnProperty(key + 'Filter') && typeof ProductFilters[key + 'Filter'] === 'function') {
products = ProductFilters[key + 'Filter'](products, Conditions[key]);
}
}
return products;
}
// 將兩種大類的篩選條件放在同一個(gè)對(duì)象里
let Conditions = {
ranges: [
{
type: 'price',
low: 3000,
high: 6000
}
],
chooses: [
{
type: 'brand',
value: '華為'
}
]
}
測(cè)試
創(chuàng)建10個(gè)商品數(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);
輸出
代碼的擴(kuò)展性和可維護(hù)性都很好，只要保證篩選條件中的type字段在商品數(shù)據(jù)中一致都可以篩選，比如將篩選條件改為
let Conditions = {
ranges: [
{
type: 'price',
low: 3000,
high: 6000
}
],
chooses: [
{
type: 'name',
value: 'iPhone'
}
]
}
輸出
搜索匹配等一些地方也需要優(yōu)化，是否區(qū)分大小寫、是完全匹配還是模糊匹配等。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)翻轉(zhuǎn)圖片的三種方法小結(jié)
有時(shí),我們可能需要翻轉(zhuǎn)Web應(yīng)用中的媒體元素,所以這篇文章小編為大家詳細(xì)介紹了三種使用JavaScript翻轉(zhuǎn)圖片的方法,希望對(duì)大家有所幫助2024-01-01
這篇文章主要為大家詳細(xì)介紹了基于JavaScript定位當(dāng)前的地理位置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
javascript簡(jiǎn)單事件處理和with用法介紹
本文為大家介紹下javascript事件處理及with用法，主要是鼠標(biāo)點(diǎn)擊與移動(dòng)，感興趣的朋友可以參考下2013-09-09
本文通過(guò)實(shí)例代碼給大介紹了js多文件上傳的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
jQuery 實(shí)現(xiàn)倒計(jì)時(shí)天,時(shí),分,秒功能
本文通過(guò)html代碼和js代碼給大家介紹了實(shí)現(xiàn)倒計(jì)時(shí)天,時(shí),分,秒功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章主要介紹了JavaScript如何獲取數(shù)組最大值和最小值，需要的朋友可以參考下2015-11-11
JS綁定事件監(jiān)聽(tīng)的幾種實(shí)現(xiàn)方法匯總
在JavaScript中事件監(jiān)聽(tīng)是一種用于處理用戶交互的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于JS綁定事件監(jiān)聽(tīng)的幾種實(shí)現(xiàn)方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了一篇文章讓你搞懂JavaScript 原型和原型鏈，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-11-11
基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能
最近做個(gè)項(xiàng)目，需要實(shí)現(xiàn)移動(dòng)端左滑刪除功能，當(dāng)時(shí)js代碼將網(wǎng)上找的進(jìn)行刪減優(yōu)化，下面通過(guò)本文給大家分享基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能，感興趣的朋友一起看看2017-07-07