有時候也會需要在前端進行資料篩選，增強互動體驗。當資料可用的篩選條件較多時，把邏輯寫死會給後期維護帶來很**煩。下面是我自己寫的乙個簡單的篩選器，篩選條件可以根據資料報含的字段動態設定。仿照京東的篩選條件，這裡就取**區間和品牌作為測試。
****中主要使用js的過濾器array.prototype.filter，該方法會對陣列元素進行遍歷檢查，返回乙個符合檢查條件的新陣列，不會改變原陣列。
// filter()
var foo = [0,1,2,3,4,5,6,7,8,9];
var foo1 = foo.filter(
function(item)
);console.log(foo1); // [5, 6, 7, 8, 9]
有了這個方法，篩選資料方便了很多，下面先定義乙個商品類。
// 定義商品類
function product(name, brand, price)
建立乙個過濾器物件，把所有過濾資料的方法放在裡面。為了能自動適配不同的篩選條件，將篩選條件分為兩個大類，乙個是區間型別rangesfilter ，如：品牌、記憶體等；乙個是選擇型別choosesfilter，如：**、螢幕尺寸等。
不同大類同時篩選時，進行的是與邏輯，每個大類在上乙個大類篩選結果上進行篩選。比如我要篩選2000-5000塊的華為手機，先呼叫rangesfilter篩選products並返回結果result1，然後用choosesfilter篩選result1並返回結果resulte2。
當然，如果還有其它大類，不一定是與邏輯，再另行處理。
// 商品篩選器
const productfilters = products
* @param >} ranges
*/rangesfilter: function (products, ranges)
/*** 選擇型別篩選
* @param products
* @param >} chooses
*/choosesfilter: function (products, chooses)
}區間型別的篩選，**如下。
// 區間型別條件結構
ranges: [
]/** * @param products
* @param >} ranges
*/rangesfilter: function (products, ranges) else );
}return products;}}
選擇型別篩選：
// 選擇型別條件結構
chooses: [,]
/** * @param products
* @param >} chooses
*/choosesfilter: function (products, chooses) else ));}}
return tmpproducts;
}定義乙個執行函式dofilter()。
function dofilter(products, conditions)
}return products;
}// 將兩種大類的篩選條件放在同乙個物件裡
let conditions =
],chooses: [
]}測試
建立10個商品資料，以及篩選條件
// 商品陣列
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 =
],chooses: [,]
}呼叫函式
let result = dofilter(products, conditions);
console.log(result);12
輸出**的擴充套件性和可維護性都很好，只要保證篩選條件中的type欄位在商品資料中一致都可以篩選，比如將篩選條件改為
let conditions =
],chooses: [
]}————————————————
js 前端資料多條件篩選過濾
最近在用vue做乙個後台管理專案，因為vue2.0刪除了內建的過濾器，無法再像1.0版本或者angularjs那樣直接使用內建的過濾器實現資料的多條件篩選過濾。因此自己寫了乙個方法來實現這種功能。假設後端通過介面給我們的資料如下 let data 在實際專案中，我們需要根據篩選框中的條件來實現資料的...
js 前端資料多條件篩選過濾
最近在用vue做乙個後台管理專案，因為vue2.0刪除了內建的過濾器，無法再像1.0版本或者angularjs那樣直接使用內建的過濾器實現資料的多條件篩選過濾。因此自己寫了乙個方法來實現這種功能。假設後端通過介面給我們的資料如下 let data 在實際專案中，我們需要根據篩選框中的條件來實現資料的...
js陣列的多條件篩選
問題 有以下陣列 var reportlist 其中reporttype表示報告型別，1為檢查報告，2為檢驗報告 isrelease 表示改報告是否已發布 處理該資料得到四個陣列 1.已發布檢驗報告 2.已發布檢查報告 3.未發布檢驗報告 4.未發布檢查報告 並且將時間處理成2019 06 25的格...