樹形節點的過濾處理

// nodes就是樹形的最原始數據，query就是關鍵字，最后會返回滿足條件的節點數組
function filter(nodes, query) {
    // 條件就是節點的title過濾關鍵字
    let predicate = function (node) {
        if (node.title.indexOf(query) > -1) {
            return true;
        } else {
            return false;
        }
    };
    if (!(nodes && nodes.length)) {
        return [];
    }
    let newChildren = [];
    for (let node of nodes) {
        // 以下兩個條件任何一個成立，當前節點都應該加入到新子節點集中
        // 1. 子孫節點中存在符合條件的，即 subs 數組中有值
        // 2. 自己本身符合條件
        // let subs = this.filter(node.children, query);
        // if (predicate(node)) {
        //   newChildren.push(node);
        // } else if (subs && subs.length) {
        //   node.children = subs;
        //   newChildren.push(node);
        // }

        // 以下只需要考慮自身的節點滿足條件即可,不用帶上父節點
        if (predicate(node)) {
            newChildren.push(node);
            node.children = this.filter(node.children, query);
        } else {
            newChildren.push(...this.filter(node.children, query));
        }
    }
    return newChildren.length ? newChildren : [];
}

 

（初始狀態的樹形結構）

 

 

 

 （過濾后不僅展示滿足條件的節點，還展示其父節點）

 

 （過濾后只展示滿足條件的節點）