[TOC] >[success] # 前端多條件篩選數據 ~~~ 需求：如下圖，有'橋梁名稱（字符串）'、'橋梁類型（數組）'、'橋梁分類（數組）'三個過濾條件用這'3'個 篩選條件'依次過濾'列表并且返回過濾后的結果，如果'橋梁名稱'沒有匹配到篩選結果返回'空數組'，'橋梁類型' 和'橋梁分類'就不繼續進行篩選。 ~~~  <br/> >[success] ## 解決思路1（if深層嵌套） ~~~ 這個屬于笨方法，思路：'if'判斷'橋梁名稱'有值，再在'if'中判斷'橋梁類型'有值，再在'if'中判斷 '橋梁分類'有值，反復'嵌套if' ~~~ JSON數據 ~~~ let bridgeDataArr = [{ "bridgeName": "橋梁1", "bridgeType": "混凝土梁式橋", "bridgeCategory": "特大橋", }, { "bridgeName": "橋梁2", "bridgeType": "鋼梁橋", "bridgeCategory": "大橋", }, { "bridgeName": "橋梁3", "bridgeType": "懸索橋", "bridgeCategory": "中橋" }, { "bridgeName": "橋梁4", "bridgeType": "斜拉橋", "bridgeCategory": "小橋" }, { "bridgeName": "橋梁5", "bridgeType": "斜拉橋", "bridgeCategory": "涵洞" }] ~~~ JS代碼 ~~~ // 篩選條件 let filterCondition = [ { bridgeName: '橋梁1', bridgeType: [], bridgeCategory: [] }, { bridgeName: '橋梁5', bridgeType: ['斜拉橋', '鋼梁橋'], bridgeCategory: [] }, { bridgeName: '橋梁5', bridgeType: ['斜拉橋', '鋼梁橋'], bridgeCategory: ['涵洞'] }, { bridgeName: '亂七八糟的橋梁', bridgeType: ['斜拉橋', '鋼梁橋'], bridgeCategory: ['涵洞'] } ] // 最終過濾結果 let finalResults = [] // 過濾方法 function filterFun(data){ // 1 - 4的隨機數 let num = Math.floor(Math.random()*4+1) // 橋梁名稱有值 if(filterCondition[num].bridgeName){ // 橋梁類型有值 if(filterCondition[num].bridgeType.length > 0){ // 橋梁分類有值 if(filterCondition[num].bridgeCategory.length > 0){ ... } else { ... } } else { ... } } else { // 橋梁名稱無值 // 橋梁類型有值 if(filterCondition[num].bridgeType.length > 0){ // 橋梁分類有值 if(filterCondition[num].bridgeCategory.length > 0){ ... } else { ... } } else { ... } } } filterFun(bridgeDataArr) ~~~ ~~~ 上面的寫法雖然可以實現想要的過濾結果，但是'嵌套'過于復雜以后新'增加篩選條件'這里代碼要發生 天翻地覆的變化。 ~~~ <br/> >[success] ## 解決思路2（解決if深層嵌套的問題） ~~~ 雖然這個方法可以解決，但是也是'野路子'判斷，雖然說避免了'反復嵌套if'判斷，把它修改成'同級'的'if'判斷， 但是以后'新增過濾條件'后這里也會發生很大的變化。 ~~~ ~~~ // 過濾方法 function filterFun(data){ // 1 - 4的隨機數 let num = Math.floor(Math.random()*4+1) // 橋梁名稱、橋梁類型、橋梁分類有值 if(filterCondition[num].bridgeName && filterCondition[num].bridgeType.length > 0 && filterCondition[num].bridgeCategory.length > 0){ 三個條件過濾操作... } else if(filterCondition[num].bridgeName && filterCondition[num].bridgeType.length > 0){ // 橋梁名稱、橋梁類型有值 過濾操作... } else if(filterCondition[num].bridgeName && filterCondition[num].bridgeCategory.length > 0){ // 橋梁名稱、橋梁分類有值 過濾操作... } else if(filterCondition[num].bridgeType.length > 0 && filterCondition[num].bridgeCategory.length > 0){ // 橋梁類型、橋梁分類有值 過濾操作... } else if(filterCondition[num].bridgeName){ // 橋梁名稱有值 過濾操作... } else if(filterCondition[num].bridgeType.length > 0){ // 橋梁類型有值 過濾操作... } else if(filterCondition[num].bridgeCategory){ // 橋梁分類有值 過濾操作... } } ~~~ <br/> >[success] ## 解決思路3 ~~~ 這種方法可以解決多種情況： 1. 無過濾條件時，只走'filterResultArr'賦值全部數據 2. '橋梁名稱'有值用橋梁名稱過濾后的結果，在'橋梁類型'、'橋梁分類'中繼續來過濾，如果在'橋梁名稱'這 過濾返回值為'空數組'，就不會往下走 ~~~ ~~~ // 過濾方法 function filterFun(data){ let filterResultArr = [] // 最終過濾結果 let bridgeNameFilter = [] // 橋梁名稱過濾結果 let bridgeTypeFilter = [] // 橋梁類型過濾結果 let bridgeCategoryFilter = [] // 橋梁分類過濾結果 if(data.length > 0){ // 項目下橋梁列表不為空 filterResultArr = data if(this.filterCondition.bridgeName){ // 橋梁名稱有值 bridgeNameFilter = filterResultArr.filter(item => { return item.bridgeName.includes(this.filterCondition.bridgeName.toUpperCase()) }) filterResultArr = bridgeNameFilter } if(filterResultArr.length > 0 && this.filterCondition.bridgeType.length > 0){ // 橋梁類型有值 bridgeTypeFilter = filterResultArr.filter(item => { return this.filterCondition.bridgeType.some(ele => ele === item.bridgeType) }) filterResultArr = bridgeTypeFilter } if(filterResultArr.length > 0 && this.filterCondition.bridgeCategory.length > 0){ // 橋梁分類有值 bridgeCategoryFilter = filterResultArr.filter(item => { return this.filterCondition.bridgeCategory.some(ele => ele === item.bridgeCategory) }) filterResultArr = bridgeCategoryFilter } } // 返回最終過濾結果 return filterResultArr } ~~~ <br/> >[success] ## 1對多過濾 ~~~ 顧名思義'1對多'，如下：我想根據輸入結果去這3個條件（跨、部件、構件）中過濾出符合任意一個條件的結果 ~~~  實現如下： ~~~ let value = '2' // 輸入框值 let arr = [ // 要過濾的數據 { K: '第1跨', BJ: '部件1', GJ: '構件1' }, { K: '第2跨', BJ: '部件2', GJ: '構件2' } ] // 過濾條件 let isKorBJorGJ = item => item.K.includes(value) || item.BJ.includes(value) || item.BJ.includes(value) console.log(arr.filter(item => isKorBJorGJ(item))) // 第二跨 ~~~