递归

• 简单递归（阶乘）
• 递归遍历对象
• 递归构造树（对于element-ui中的树形结构数据很有用）

定义

程序调用自身的方法

简单递归 --- 阶乘

function f (num) {
    if(num <= 1) {
        return 1
    } else {
        return f(num - 1) * num
    }
}
f(5) // 120

递归遍历对象 -- 取出所有id并放入数组

// 形如下对象，写一个递归的方法将所有id取出，并放入一个数组当中
let obj = {
    a: {
        id: 1,
        name: 'a',
        aa: {
            id: 11,
            name: 'aa'
        }
    },
    b: {
        id: 2,
        name: 'b',
        bb: {
            id: 22,
            name: 'bb',
            bbb: {
                id: 222,
                name: 'bbb'
            }
        }
    },
    c: {
        id: 3,
        name: 'c'
    }
}

var arr = []
function f (obj) {
    if (typeof obj === 'object') {
        for (let i in obj) {
            if(typeof obj[i] === 'object') {
                f(obj[i])
            } else if (i === 'id') { // 根据我们需要进行修改
                arr.push(obj[i]) 
            }
        }
    }
}

f(obj) // [1, 11, 2, 22, 222, 3]

递归构造树（递归更改对象属性 - 例如element-ui中的树形结构）

// 根据树形结构要求 --- name -> label   sonObj -> children
let arr = [{
            name: 'a',
            sonObj: {
                name: 'aa',
                sonObj: {
                    name: 'aaa',
                }
            }
         },
         {
            name: 'b',
            sonObj: {
                name: 'bb'
            }
         }
]
function f (obj, label, children) {
    obj.label = obj[label]
    delete obj[label]
    if(obj[children]) {
        obj.children = obj[children]
        f(obj.children, 'name', 'sonObj')
        delete obj[children]
    }
}
function makeTreeData(arr) {
    arr.forEach(item => {
        f(item, 'name', 'sonObj') // 配置2,3两个参数，可以更加通用化
    })
}
makeTreeData(arr)

如果只是针对element-ui中的树形结构来说，可以直接使用element-ui提供的props属性来进行直接配置。这边只是提供一个通用的方法，其他地方可能并不会提供这样的配置（例如：d3.js中的树形结构）