js广度优先和深度优先

今天面试，有个算法题，说用广度优先的算法，打印出节点的值。
首先说明一下什么是广度优先，什么是深度优先，举个例子来说，广度就是横向发展，和我们程序员一样，就是先全栈横向发展，等都会了，再一个一个往深了学，也就是一层一层的学。深度就是纵向发展，就是比如说，你先学js，把js精通了，然后是html，也精通了，最后再学css，也学精通了，就算完成了。对于程序员来说，我感觉深度和广度要结合着来，自己要把握好一个度。
对于算法来说，就要么深度遍历，要么广度遍历。算法这块我后面应该会系统的更新一下，所以这篇就完全记录一下自己今天遇到的面试题，数据结构和算法网盘接下来要系统的学一下，也会及时更新一下博客的。
首先数据是这样子的：

const data = [
    {name:'中国', 
    children:[
        {name:'北京',
        children:[
            {name:'海淀'}
        ]},
        {
            name:'浙江',
            children:[
                {name:'杭州'}
            ]
        }
    ]}
]

广度要求输出：[ '中国', '北京', '浙江', '海淀', '杭州' ]
深度要求输出：[ '中国', '北京', '海淀', '浙江','杭州' ]
首先看看广度优先的实现方式，这个不是最优解，以后会更新其他实现方式：

function guangdu(node) {
    let res = []
    let arr = node
    while(arr.length > 0) {
        [...arr].forEach(item => {
            res.push(item.name)
            item.children && arr.push(...item.children)
            arr.shift()
        })
    }
    return res
}

接下来看看深度优先的实现方式：

function shendu(data) {
    const res = []
    data.forEach(item => {
        let map = data => {
            res.push(data.name)
            data.children && data.children.forEach(item => map(item))
        }
        map(item)
    })
    return res
}
个人觉得深度比较难理解一点，广度比较好理解一点。