js 數組轉爲樹形結構

時間 2019-12-02

原文原文鏈接

題目：html

source = [{ id: 1, pid: 0, name: 'body' }, { id: 2, pid: 1, name: 'title' }, { id: 3, pid: 2, name: 'div' }] 轉換爲: [{ id: 1, pid: 0, name: 'body', children: [{ id: 2, pid: 1, name: 'title', children: [{ id: 3, pid: 1, name: 'div' }] } }]

代碼實現：ui

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=`, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>toTree</title>
    </head>

    <body>
        <script>
            var source = [{ id: 1, pid: 0, name: 'body' }, { id: 2, pid: 1, name: 'title' }, { id: 3, pid: 1, name: 'div' }, { id: 4, pid: 3, name: 'span' }, { id: 5, pid: 3, name: 'icon' }, { id: 6, pid: 4, name: 'subspan' }] function toTree(data) { let result = [] if(!Array.isArray(data)) { return result } data.forEach(item => { delete item.children; }); let map = {}; data.forEach(item => { map[item.id] = item; }); data.forEach(item => { let parent = map[item.pid]; if(parent) { (parent.children || (parent.children = [])).push(item); } else { result.push(item); } }); return result; } console.log(toTree(source)) </script>
    </body>

</html>