javascript - 使用 Javascript 推送嵌套数组注释

Question

我从服务器得到一个像这样的注释数组:

var comments = [{
    id: 1,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}, {
    id: 2,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}, {
    id: 3,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1]
}, {
    id: 4,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1]
}, {
    id: 5,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1, 3]
}, {
    id: 6,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}];

每个对象的父数组是其父对象及其之上的地址。 所以我想将每个评论推送到新回复数组项目中的正确父级。 我用这种方式对评论进行排序:

var sort = function(a, b) {
    if (a.pasokh.length < b.pasokh.length) {
        return 1;
    }
    if (a.pasokh.length > b.pasokh.length) {
        return -1;
    }
    // a must be equal to b
    return 0;
};

comments.sort(sort);

然后像这样获取数组:

[{
    id: 5,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1, 3]
}, {
    id: 3,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1]
}, {
    id: 4,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [1]
}, {
    id: 1,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}, {
    id: 2,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}, {
    id: 6,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}]

评论的顺序可能与上面不完全正确。 将 id:5 推送到 id:3 以及 id:3 & id:4toid:1` 并获取的最佳方法是什么像这样的数组:

[{
    id: 1,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: [],
    reply: [{
        id: 3,
        text: 'Lorem ipsum dolor sit amet... ',
        parent: [1],
        reply: [{
            id: 5,
            text: 'Lorem ipsum dolor sit amet... ',
            parent: [1, 3]
        }, ]
    }, {
        id: 4,
        text: 'Lorem ipsum dolor sit amet... ',
        parent: [1]
    }, ]
}, {
    id: 2,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}, {
    id: 6,
    text: 'Lorem ipsum dolor sit amet... ',
    parent: []
}]

Answer 1

此提案适用于未排序的数据。它以 id 作为引用，甚至将未知的 id 对象应用于临时对象，并稍后用给定的数据填充它。这意味着该解决方案只需要一个循环。

var comments = [{ id: 1, text: 'Lorem ipsum dolor sit amet... ', parent: [] }, { id: 2, text: 'Lorem ipsum dolor sit amet... ', parent: [] }, { id: 3, text: 'Lorem ipsum dolor sit amet... ', parent: [1] }, { id: 4, text: 'Lorem ipsum dolor sit amet... ', parent: [1] }, { id: 5, text: 'Lorem ipsum dolor sit amet... ', parent: [1, 3] }, { id: 6, text: 'Lorem ipsum dolor sit amet... ', parent: [] }],
    tree = function (array) {
        var r = [],
            o = Object.create(null);

        array.forEach(function (a) {
            var id;
            a.reply = o[a.id] && o[a.id].reply;
            o[a.id] = a;
            id = a.parent.reduce(function (r, a) {
                r !== null && !(a in o) && o[r].reply.push(o[a] = {});
                return a;
            }, null);
            if (id !== null) {
                o[id].reply = o[id].reply || [];
                o[id].reply.push(a);
            } else {
                r.push(o[a.id]);
            }
        });
        return r;
    }(comments);

console.log(tree);

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