首頁猿問 js如何實(shí)現(xiàn)多層級(jí)數(shù)組篩選

js如何實(shí)現(xiàn)多層級(jí)數(shù)組篩選

JavaScript

瀟湘沐 2019-05-11 17:06:46

現(xiàn)有一個(gè)多層級(jí)數(shù)組，層數(shù)不固定，想要通過輸入一個(gè)關(guān)鍵字，能夠?qū)⒄麄€(gè)數(shù)組遍歷一遍，然后將與name模糊匹配上的元素篩選出來，而且還要保留其所在的層級(jí)結(jié)構(gòu)。請(qǐng)問有什么好的實(shí)現(xiàn)思路么？//舉例數(shù)組結(jié)構(gòu)vartreeNodeList=[{"name":"一級(jí)A","children":[{"name":"一級(jí)-1","children":[{"name":"一級(jí)-1-1","children":[{"name":"一級(jí)-1-1-1","type":"true",},{"name":"一級(jí)-1-1-3","type":"true",}]}]},{"name":"二級(jí)B","children":[{"name":"二級(jí)-1","children":[{"name":"二級(jí)-2-2","children":[{"name":"二級(jí)-2-2-2","type":"true",},{"name":"二級(jí)-2-2-1","type":"true",}]}]},{"name":"三級(jí)C","children":[{"name":"三級(jí)-1","children":[{"name":"三級(jí)-3-1","children":[{"name":"三級(jí)-3-3-1","type":"true",},{"name":"三級(jí)-3-3-2","type":"true",}]}]},]//輸入關(guān)鍵字3想要篩選出如下結(jié)果[{"name":"一級(jí)A","children":[{"name":"一級(jí)-1","children":[{"name":"一級(jí)-1-1","children":[{"name":"一級(jí)-1-1-3","type":"true",}]}]},{"name":"三級(jí)C","children":[{"name":"三級(jí)-1","children":[{"name":"三級(jí)-3-1","children":[{"name":"三級(jí)-3-3-1","type":"true",},{"name":"三級(jí)-3-3-2","type":"true",}]}]},]//輸入關(guān)鍵字A想要篩選出如下結(jié)果[{"name":"一級(jí)A","children":[{"name":"一級(jí)-1","children":[{"name":"一級(jí)-1-1","children":[{"name":"一級(jí)-1-1-1","type":"true",},{"name":"一級(jí)-1-1-3","type":"true",}]}]}]

查看完整描述

2 回答

千巷貓影

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

vartreeNodeList=[{"name":"一級(jí)A","children":[{"name":"一級(jí)-1","children":[{"name":"一級(jí)-1-1","children":[{"name":"一級(jí)-1-1-1","type":"true",},{"name":"一級(jí)-1-1-3","type":"true",}]}]}]},{"name":"二級(jí)B","children":[{"name":"二級(jí)-1","children":[{"name":"二級(jí)-2-2","children":[{"name":"二級(jí)-2-2-2","type":"true",},{"name":"二級(jí)-2-2-1","type":"true",}]}]}]},{"name":"三級(jí)C","children":[{"name":"三級(jí)-1","children":[{"name":"三級(jí)-3-1","children":[{"name":"三級(jí)-3-3-1","type":"true",},{"name":"三級(jí)-3-3-2","type":"true",}]}]}]}]varquery='A';varfilterObj=function(item){if(item.name.indexOf(query)>-1)returntrue;if(item.hasOwnProperty("children")){item.children=item.children.filter(function(child){if(child.hasOwnProperty("type")){returnchild.name.indexOf(query)>-1;}elseif(child.hasOwnProperty("children")){returnfilterObj(child);}})if(item.children.length>0){returntrue;}}else{returnchild.name.indexOf(query)>-1;}}varfilter=treeNodeList.filter(function(item){returnfilterObj(item);});console.log(JSON.stringify(filter));自己寫了幾行代碼，經(jīng)測(cè)試通過，可供參考。

反對(duì) 回復(fù) 2019-05-11

拉丁的傳說

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊

我之前寫過一個(gè)多維數(shù)組指定子項(xiàng)扁平化函數(shù)/***多維數(shù)組指定子項(xiàng)扁平化函數(shù)*@paramarray要執(zhí)行的扁平化數(shù)組*@paramchildrenKeys要參與扁平的子鍵名數(shù)組默認(rèn)['children']*@paramflattenParent默認(rèn)的父數(shù)組*@paramflattenParentKey被壓平后子項(xiàng)父數(shù)組存放鍵名*@returns{Array}*/functionarrayChildrenFlatten(array,{childrenKeys,flattenParent,flattenParentKey}={}){childrenKeys=childrenKeys||['children'];flattenParent=flattenParent||[];flattenParentKey=flattenParentKey||'flattenParent';constresult=[];array.forEach(item=>{constflattenItem=JSON.parse(JSON.stringify(item));flattenItem[flattenParentKey]=flattenParent;result.push(flattenItem);childrenKeys.forEach(key=>{if(item[key]&&Array.isArray(item[key])){constchildren=arrayChildrenFlatten(item[key],{childrenKeys,flattenParent:[...flattenParent,item],flattenParentKey,});result.push(...children);}});});returnresult;}提前把數(shù)組用這個(gè)函數(shù)處理后要篩選就是一個(gè)遍歷的事情，如果采用的話通過flattenParentKey重新生成樹因?yàn)槲矣貌坏經(jīng)]有現(xiàn)成的就要靠你自己去寫了