<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>树 深度、广度遍历</title>
</head>

<body>
    <textarea></textarea>
</body>

</html>
const cl = {
    txt: document.body.getElementsByTagName('textarea')[0],
    log: function (log, ti) {
        console.log(log);
        let val;
        if (ti) {
            val = JSON.stringify(log, null, ti)
        } else {
            val = JSON.stringify(log)
        }
        cl.txt.value += val + "\n\n";
    }
}

let tree = [
    {
        no: 1,
        children: [
            {
                no: 2
            },
            {
                no: 3
            }
        ]
    },
    {
        no: 4,
        children: [
            {
                no: 5
            },
            {
                no: 6,
                children: [
                    {
                        no: 7
                    },
                    {
                        no: 8
                    }
                ]
            }
        ]
    },
    {
        no: 9
    }
];

cl.log('树 深度、广度遍历');
cl.log(tree, 2);

cl.log('深度遍历');

(function (tree) {
    tree.forEach(item => {
        cl.log(item)
        if (item.children) {
            arguments.callee(item.children)
        }
    })
})(tree);

cl.log('广度遍历');

(function (tree) {
    let child = []
    tree.forEach(item => {
        cl.log(item);
        if (item.children) {
            child = child.concat(item.children)
        }
    })
    if (child.length) {
        arguments.callee(child)
    }
})(tree);
* {    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

textarea {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 15px;
    font-size: 16px;
    color: #adbac7;
    font-weight: 600;
    box-sizing: border-box;
    background-color: #22272e;
}