笔试题：实现树组件handleUnCheck方法

题目描述

假设我们在开发一个可check的树组件，请编写一个handleUnCheck方法，用于实现摸个树节点被取消选中后，计算整棵树的选中状态，所有子孙节点需要被取消选中。

方法参数说明：

1. treeData - 嵌套的树结构，结构面熟见下面代码块中的TreeData。
2. preCheckedKeys - 之前的选中状态，值内容为选中节点的key数组。
3. key - 将要被取消选中的节点key。

方法输出说明：取消选中之后的树选中状态，值内容为选中节点的key数组。

type Key = string;

type TreeData = Array<{
    key: Key;
    children?: TreeData;
}>;

type CheckedKeys = Array<Key>;

interface Node {
    key: Key,
    parent: string | null
}
function handleUnCheck(
    treeData: TreeData,
    preCheckedKeys: CheckedKeys,
    key: Key,
): CheckedKeys {
    // 请实现
}

const TREE_DATA = [{
    key: 'a-1',
    children: [
        {
            key: 'b-1',
            children: [
                { key: 'c-1-1' },
                { key: 'c-1-2' }
            ]
        },
        { key: 'b-2' },
        { key: 'b-3' }
    ]
}, {
    key: 'a-2'
}];

console.log(handleUnCheck(TREE_DATA, ['a-1', 'b-1', 'b-2', 'c-1-1'], 'c-1-1')); // ['a-1', 'b-1', 'b-2']
console.log(handleUnCheck(TREE_DATA, ['a-1', 'b-1', 'c-1-1', 'a-2'], 'a-1')); // ['a-2']

分析

将TREE_DATA从树状结构转为数组，存放每个节点以及他的父节点，{ key:xxx,parent:xxx }的形式。

• 采用递归遍历整棵树，生成对应的数组allNodes。
• 之后根据handleUnCheck传入的第三个参数key，在allNodes中查找对应需要删除的节点生成removeNodes。
• allNodes中与其key相同或者parent相同，或者parent的parent等于key都需要删除。因此也需要递归。
• 之后求removeNodes和preCheckedKeys的差集。

代码

type Key = string;

type TreeData = Array<{
    key: Key;
    children?: TreeData;
}>;

type CheckedKeys = Array<Key>;

interface Node {
    key: Key,
    parent: string | null
}
function handleUnCheck(
    treeData: TreeData,
    preCheckedKeys: CheckedKeys,
    key: Key,
): CheckedKeys {
    // 请实现
    type TreeObj = TreeData[0]
    // 拿到所有的叶子节点
    const allNodes: Array<Node> = []
    // 需要删除的节点
    const removeNodes = new Set([key])

    treeData.forEach(treeDataItem => {
        let count = 0
        getTreeNodeParent(treeDataItem, count)
    })
    getRemoveTreeNodeList(allNodes, key)

    const res: CheckedKeys = preCheckedKeys.filter(item => {
        return !removeNodes.has(item)
    })
    return res
    function getRemoveTreeNodeList(allNodes, removeKey: Key) {
        allNodes.forEach(item => {
            if (item.parent === removeKey) {
                removeNodes.add(item.key)
                const res = isParent(allNodes, item.key)
                if (res && !removeNodes.has(res as string)) {
                    getRemoveTreeNodeList(allNodes, item.key)
                }
            }
        })
    }
    function isParent(arr: Array<Node>, itemKey: Key): boolean | string {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].parent === itemKey) {
                return arr[i].key
            }
        }
        return false
    }
    function getTreeNodeParent(parent: TreeObj, count: number): void {
        if (count === 0) {
            // 第一层的parent为null
            allNodes.push({ key: parent.key, parent: null } as Node)
        }
        count++
        parent.children && parent.children.forEach(item => {
            allNodes.push({ key: item.key, parent: parent.key } as Node)
            if (item.children) {
                getTreeNodeParent(item, count++)
            }
        })
    }
}

const TREE_DATA = [{
    key: 'a-1',
    children: [
        {
            key: 'b-1',
            children: [
                { key: 'c-1-1' },
                { key: 'c-1-2' }
            ]
        },
        { key: 'b-2' },
        { key: 'b-3' }
    ]
}, {
    key: 'a-2'
}];

console.log(handleUnCheck(TREE_DATA, ['a-1', 'b-1', 'b-2', 'c-1-1'], 'c-1-1')); // ['a-1', 'b-1', 'b-2']
console.log(handleUnCheck(TREE_DATA, ['a-1', 'b-1', 'c-1-1', 'a-2'], 'a-1')); // ['a-2']