快捷導(dǎo)航

js中如何對(duì)嵌套數(shù)組進(jìn)行filter過(guò)濾

更新時(shí)間：2023年06月29日 15:37:28 作者：xjc233

這篇文章主要介紹了js中如何對(duì)嵌套數(shù)組進(jìn)行filter過(guò)濾問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

js對(duì)嵌套數(shù)組進(jìn)行filter過(guò)濾

最近碰到一個(gè)需求，對(duì)嵌套數(shù)組進(jìn)行filter過(guò)濾，但是搜遍了CSDN,沒(méi)有找到合適的答案，最后也是解決了，記錄一下解決方法

由于返回的數(shù)據(jù)類型太復(fù)雜，這里只做一個(gè)小的樣例

listData = [
? {
? ? name: 'zhangsan'
? ? data: [A,B,C]
? },
? {
? ? name: 'lisi'
? ? data: [D,E,F]
? }
]

要求便是在data數(shù)組中進(jìn)行篩選，篩選出對(duì)應(yīng)的name，filter只能對(duì)第一層進(jìn)行篩選，當(dāng)時(shí)想到的是使用兩層filter，但是沒(méi)有用，最后經(jīng)過(guò)多次實(shí)驗(yàn)，最后發(fā)現(xiàn)filter+find可以使用，看一下代碼部分

const filterRepositoryList = () => {
? if (
? ? !slectedInfo.sigSelected &&
? ? !slectedInfo.repositiorySelected &&
? ? !slectedInfo.maintainerSelected
? ) {
? ? repoRenderList.value = repositioryList.value.slice(0, 99);
? ? getSigList(initialParams);
? } else {
? ? SigList.value = _.filter(allList.value, (item: any) => {
? ? ? return (
? ? ? ? (!slectedInfo.sigSelected ||
? ? ? ? ? item.sig_name === slectedInfo.sigSelected) &&
? ? ? ? (!slectedInfo.repositiorySelected ||
? ? ? ? ? item.repos.find((subItem: string) => {
? ? ? ? ? ? return subItem === slectedInfo.repositiorySelected;
? ? ? ? ? })) &&
? ? ? ? (!slectedInfo.maintainerSelected ||
? ? ? ? ? item.maintainers.find((subItem: string) => {
? ? ? ? ? ? return subItem === slectedInfo.maintainerSelected;
? ? ? ? ? }))
? ? ? );
? ? });
? ? paginationData.value.total = SigList.value.length;
? }
};

這個(gè)代碼比較全了，包含了篩選的全部邏輯，因?yàn)楫?dāng)時(shí)刪選的表格下面還有一個(gè)分頁(yè)條，所以進(jìn)行了判空，為空就展示全部數(shù)據(jù)，加一個(gè)分片，不為空，就篩選，看一下代碼的主要部分

// 安裝了lodash，所以用了lodash的篩選
SigList.value = _.filter(allList.value, (item: any) => {?
? return (
? ? (!slectedInfo.sigSelected ||
? ? ?item.sig_name === slectedInfo.sigSelected) &&
? ? ?// 雙層篩選主要代碼，在data數(shù)組中進(jìn)行find
? ? ?(!slectedInfo.repositiorySelected ||
? ? ?item.repos.find((subItem: string) => {
? ? ? ?return subItem === slectedInfo.repositiorySelected;
? ? ?})) &&
? ? ?(!slectedInfo.maintainerSelected ||
? ? ?item.maintainers.find((subItem: string) => {
? ? ? ? return subItem === slectedInfo.maintainerSelected;
? ? ? }))
? ? );
});

這樣就實(shí)現(xiàn)了一個(gè)雙層的過(guò)濾。

js多層數(shù)組的Filter過(guò)濾

    // 搜索框過(guò)濾
  function searchFilter(list, key, num, prevList) {
        for (let i = list.length - 1; i >= 0; i--) {
            let item = list[i]
            if (item.children && Array.isArray(item.children) && item.children.length > 0) {
                searchFilter(item.children, key, i, list);
            } else {
                if (item.title && !item.title.includes(key)) {
                  list.splice(i, 1)
                }
            }
        }
        if (Array.isArray(list) && list.length == 0) {
          if(prevList && num){
            prevList.splice(num, 1)
          }
        }
    }
//調(diào)用
searchFilter(list,key)