压平 JavaScript 树，尝试了一些解决方案

Question

鉴于这棵树，是否有一种简单的方法可以将其转换为具有以下条件的平面数组？JS ES5，也使用了 jQuery尊重呈现顺序添加显示缩进级别的“级别”属性，从 0 开始预期的结果应该是这样的：[ {  "root": "0",  "id": "1",  "name": "Frutta",  "status": "1",  "position": "1"  "level": 0 }, {  "root": "1",  "id": "4",  "name": "Agrumi",  "status": "1",  "position": "3",  "level": 1 }, {  "root": "1",  "id": "5",  "name": "Pere",  "status": "1",  "position": "4",  "level": 1 }, {  "root": "0",  "id": "2",  "name": "Ortaggi",  "status": "1",  "position": "1",  "level": 0 }, {  "root": "2",  "id": "7",  "name": "Da foglia",  "status": "1",  "position": "6",  "level": 1 }, {  "root": "7",  "id": "9",  "name": "Insalate",  "status": "1",  "position": "1",  "level": 2 },...

Answer 1

您可以采用递归方法Array#flatMap并存储下一次调用的级别。

const

    flatTree = (level = 0) => ({ children = [], ...object }) => [

        { ...object, level }, ...children.flatMap(flatTree(level + 1))

    ];

var tree = [{ root: "0", id: "1", name: "Frutta", status: "1", position: "1", children: [{ root: "1", id: "4", name: "Agrumi", status: "1", position: "3", children: [] }, { root: "1", id: "5", name: "Pere", status: "1", position: "4", children: [] }] }, { root: "0", id: "2", name: "Ortaggi", status: "1", position: "1", children: [{ root: "2", id: "7", name: "Da foglia", status: "1", position: "6", children: [{ root: "7", id: "9", name: "Insalate", status: "1", position: "1", children: [] }] }, { root: "2", id: "8", name: "Da fiore", status: "1", position: "7", children: [] }, { root: "2", id: "21", name: "Da frutto", status: "1", position: "16", children: [] }, { root: "2", id: "22", name: "Da radici", status: "1", position: "17", children: [] }, { root: "2", id: "23", name: "Da fusto", status: "1", position: "8", children: [] }, { root: "2", id: "24", name: "Da bulbi", status: "1", position: "18", children: [] }] }, { root: "0", id: "15", name: "Colori", status: "1", position: "14", children: [{ root: "15", id: "3", name: "Banane", status: "1", position: "2", children: [{ root: "3", id: "6", name: "Mele", status: "1", position: "5", children: [] }] }, { root: "15", id: "16", name: "Blu/Viola", status: "1", position: "10", children: [] }, { root: "15", id: "17", name: "Verde", status: "1", position: "11", children: [] }, { root: "15", id: "18", name: "Bianco", status: "1", position: "12", children: [] }, { root: "15", id: "19", name: "Giallo/Arancio", status: "1", position: "13", children: [] }, { root: "15", id: "20", name: "Rosso", status: "1", position: "14", children: [] }] }, { root: "0", id: "25", name: "Persone", status: "1", position: "24", children: [{ root: "25", id: "26", name: "Fabrizio", status: "1", position: "2", children: [{ root: "26", id: "27", name: "Uomo", status: "1", position: "21", children: [] }] }, { root: "25", id: "28", name: "Ivan", status: "1", position: "1", children: [] }] }, { root: "0", id: "29", name: "Category", status: "1", position: "25", children: [] }],

    flat = tree.flatMap(flatTree());

console.log(flat);

.as-console-wrapper { max-height: 100% !important; top: 0; }

ES5 与Array#reduce.

function flatTree(level) {

    return function(result, object) {

        var children = object.children || [],

            item = Object.keys(object).reduce(function (o, k) {

                if (k !== 'children') o[k] = object[k];

                return o;

            }, {});

        level = level || 0;

        item.level = level;

        return result.concat(item, children.reduce(flatTree(level + 1), []));

    };

}

var tree = [{ root: "0", id: "1", name: "Frutta", status: "1", position: "1", children: [{ root: "1", id: "4", name: "Agrumi", status: "1", position: "3", children: [] }, { root: "1", id: "5", name: "Pere", status: "1", position: "4", children: [] }] }, { root: "0", id: "2", name: "Ortaggi", status: "1", position: "1", children: [{ root: "2", id: "7", name: "Da foglia", status: "1", position: "6", children: [{ root: "7", id: "9", name: "Insalate", status: "1", position: "1", children: [] }] }, { root: "2", id: "8", name: "Da fiore", status: "1", position: "7", children: [] }, { root: "2", id: "21", name: "Da frutto", status: "1", position: "16", children: [] }, { root: "2", id: "22", name: "Da radici", status: "1", position: "17", children: [] }, { root: "2", id: "23", name: "Da fusto", status: "1", position: "8", children: [] }, { root: "2", id: "24", name: "Da bulbi", status: "1", position: "18", children: [] }] }, { root: "0", id: "15", name: "Colori", status: "1", position: "14", children: [{ root: "15", id: "3", name: "Banane", status: "1", position: "2", children: [{ root: "3", id: "6", name: "Mele", status: "1", position: "5", children: [] }] }, { root: "15", id: "16", name: "Blu/Viola", status: "1", position: "10", children: [] }, { root: "15", id: "17", name: "Verde", status: "1", position: "11", children: [] }, { root: "15", id: "18", name: "Bianco", status: "1", position: "12", children: [] }, { root: "15", id: "19", name: "Giallo/Arancio", status: "1", position: "13", children: [] }, { root: "15", id: "20", name: "Rosso", status: "1", position: "14", children: [] }] }, { root: "0", id: "25", name: "Persone", status: "1", position: "24", children: [{ root: "25", id: "26", name: "Fabrizio", status: "1", position: "2", children: [{ root: "26", id: "27", name: "Uomo", status: "1", position: "21", children: [] }] }, { root: "25", id: "28", name: "Ivan", status: "1", position: "1", children: [] }] }, { root: "0", id: "29", name: "Category", status: "1", position: "25", children: [] }],

    flat = tree.reduce(flatTree(), []);

console.log(flat);

.as-console-wrapper { max-height: 100% !important; top: 0; }