javascript - 如何使用 lodash 对嵌套数组进行排序

Question

我在这个数组中有一个对象集合，我需要通过“order”键(asc)对它们进行排序。有没有办法对数组内的对象进行排序，然后返回整个数组？我依赖于顺序，因为我在带有 :key 的 v-for 中使用它。

[
    {
        "id":0,
        "type":"Header",
        "order":1,
        "props":{
            "order":0,
            "id":0,
            "section_id":0
        },
        "data":{
            "header":""
        },
        "component":"header-block"
    },
    {
        "id":1,
        "type":"Header",
        "order":0,
        "props":{
            "order":1,
            "id":1,
            "section_id":0
         },
         "data":{
            "header":""
         },
         "component":"header-block"
    }
],
[
    //Another collection of objects
]

我目前正在做这个 -

getters: {
        sorted: state => {
            return _.orderBy(state.experience_sections, function(block) {
                if(block.experience_blocks[0]) {
                    return block.experience_blocks[0].order;
                }
            });
        }
    }

上面的解决方案似乎没有按“asc”顺序对对象进行排序。我走在正确的轨道上吗？

谢谢!

P.S. Stack 告诉我这可能是一个重复的问题，但经过几个小时的搜索后我不知所措。如果我错过了一个已经回答的问题，我深表歉意。

Answer 1

您还应该考虑orderBy lodash 中的方法，因为如果您想稍后更改排序顺序或通过 UI 传递变量等方式，可以轻松地将排序顺序从 asc 更改为 desc:

const data = [ [{ "id": 0, "type": "Header", "order": 1, "props": { "order": 0, "id": 0, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" }, { "id": 1, "type": "Header", "order": 0, "props": { "order": 1, "id": 1, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" } ], [{ "id": 0, "type": "Header", "order": 2, "props": { "order": 0, "id": 0, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" }, { "id": 1, "type": "Header", "order": 1, "props": { "order": 1, "id": 1, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" } ] ]

console.log('asc:', _.map(data, x => _.orderBy(x, 'order'))) // asc order
console.log('desc:', _.map(data, x => _.orderBy(x, 'order', 'desc'))) // desc

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>