【json数组排序】json数组按照某个字段升序降序（已实现，附完整代码）

写在前面

昨天晚上写了一篇关于jqgrid表格树状结构实现的代码，今天就在公司的业务功能上进行融入，融入后发现两个很坑的地方
1、表格中字段必须要有ID字段（可能组件版本问题）
2、表格的数据必须得按照它父子结构固有顺序排序（可能组件本身问题）
就基于第二点我就去做了一下数据的处理，准确来说应该是后端接口返回时候就返回一个我想要的结构，没办法，谁让我人太好，这就直接开干了。
今天的目标是将JSON数组按照指定字段进行升降序排序。

涉及知识点

sort函数应用，数组排序，数组升序，数组降序，数组按字段升序，数组按字段降序，复杂数组排序处理，父子结构数组按照某字段排序，树状数组排序处理。
本文原创于csdn博主-《拄杖盲学轻声码》，了解更多可以关注哈哟

---

---

一、核心实现逻辑

其实我这边的核心在于我们js固有的sort()排序函数。
原则：不生成副本，直接更改原来数组
具体应用如下：

1.简单数组排序

var arr=[-2,-1,0,2,1];
console.log(arr.sort());//-1 -2 0 1 2

这个现象主要是因为负数中，越小的数编码值越大

2.升级排序（解决负数编码问题）

var arr=[-2,-1,0,2,1];
arr.sort(function(a,b){ return a-b; });
console.log(arr.sort());

从控制台不难看出我们的负数排序问题已经解决了

二、公共函数的封装

其实从上面的第二个升级排序我们就可以应用到json数组排序中了。

1、应用场景：针对json数组按某字段升序

var hddData = [{
    "name": "黄大大",
    "id": 11,
    "order": 1011
}, {
    "name": "黄大大001",
    "id": 3,
    "order": 19
}, {
    "name": "黄大大012",
    "id": 13,
    "order": 11
}, {
    "name": "黄大大000",
    "id": 62,
    "order": 12
}]
hddData.sort(function (a, b) {
     return a.name > b.name ? 1 : -1
});

这样的话就能输出一个我想要的按照name字段进行升序排序后数据了。

2、通用函数封装（支持随意字段和升降序选择）

封装一个函数之前我们第一想到的是函数必备参数，在这里我主要想到了三个：源数据，升降序字段，按照那个字段
如下所示核心函数：

/**
 * 
 * @param resourceData 源数据
 * @param order: desc-降序,asc-升序
 * @param keyName: 按照的字段
 */
function sortJsonArr(resourceData, order, keyName) {
    debugger;
    resourceData.sort(function (a, b) {
        if (order == "asc") {
            return a[keyName] > b[keyName] ? 1 : -1
        } else {
            return a[keyName] < b[keyName] ? 1 : -1
        }
    });
    return resourceData;
}

其实封装过程主要就是做了一个判断和key动态替换，下面我们可以做一些测试哈。
本文原创于csdn博主-《拄杖盲学轻声码》，了解更多可以关注哈哟

三、控制台测试

1、测试场景1：按照id升序

测试代码

var hddSortData = sortJsonArr(hddData, "asc", "id");
console.log("排序后的数据为：" + JSON.stringify(hddSortData));

输出结果

2、测试场景2：按照order降序

测试代码

var hddSortData = sortJsonArr(hddData, "desc", "order");
console.log("排序后的数据为：" + JSON.stringify(hddSortData));

输出结果

四、排序逻辑升级（父子关系）

1、树状json数组场景

现在有个层级结构的json数组，如下所示：

var treeJson = [{
    id: 3,
    name: 'hxx',
    order: 2,
    parent: null
}, {
    id: 1,
    name: 'hdd',
    order: 1,
    parent: null
}, {
    id: 2,
    name: 'hdd001',
    order: 1,
    parent: "1"
}, {
    id: 4,
    name: 'hxx002',
    order: 2,
    parent: "3"
}, {
    id: 5,
    name: 'hxx001',
    order: 1,
    parent: "3"
}];

比如上述结构中，我想要做的排序规则是
1-先父节点
2-当前父节点下的子节点
3-下一个父节点
4-下一个父节点的子节点
依次类推，其实就是方便树结构数据的表格展示
最终排序是：hdd-hdd001-hxx-hxx001-hxx002

2、父子数组结构排序实现

A、父数据过滤

首先我们应该对父元素进行一个过滤出来先，也就是利用parent属性值为null依据，然后对父节点数据进行order字段排序。

//设置
var parentList = [];
for (var k = 0; k < treeJson.length; k++) {
    if (treeJson[k]["parent"] == null) {
        parentList.push(treeJson[k]);
    }
}
//对父数组进行order字段升序排序
parentList.sort(function (a, b) {
    return a.order > b.order ? 1 : -1
});

B、数据抽取

然后我们先定义一个数组存放最终结果，可以基于父节点进行遍历，只要parent是当前的就进行处理，也就是每个父下的子都汇聚到一起，然后进行order排序，具体核心实现如下：

var childJsonArr = [];//子元素集合
var totalJsonArr = [];//最终排序后的数组
for (var j = 0; j < parentList.length; j++) {
    childJsonArr = [];//针对子结构进行排序和塞值
    totalJsonArr.push(parentList[j]);
    for (var k = 0; k < res.length; k++) {
        if (res[k]["parent"] == parentList[j].) {
            childJsonArr.push(res[k]);
        }
    }
    //子元素集合排序
    childJsonArr.sort(function (a, b) {
        return a.order > b.order ? 1 : -1
    });
    for (var i = 0; i < childJsonArr.length; i++) {
        totalJsonArr.push(childJsonArr[i]);
    }
}

3、测试结果

测试完整代码：

var treeJson = [{
    id: 3,
    name: 'hxx',
    order: 2,
    parent: null
}, {
    id: 1,
    name: 'hdd',
    order: 1,
    parent: null
}, {
    id: 2,
    name: 'hdd001',
    order: 1,
    parent: "1"
}, {
    id: 4,
    name: 'hxx002',
    order: 2,
    parent: "3"
}, {
    id: 5,
    name: 'hxx001',
    order: 1,
    parent: "3"
}];
//设置
var parentList = [];
for (var k = 0; k < treeJson.length; k++) {
    if (treeJson[k]["parent"] == null) {
        parentList.push(treeJson[k]);
    }
}
//对父数组进行order字段升序排序
parentList.sort(function (a, b) {
    return a.order > b.order ? 1 : -1
});
var childJsonArr = [];//子元素集合
var totalJsonArr = [];//最终排序后的数组
for (var j = 0; j < parentList.length; j++) {
    childJsonArr = [];//针对子结构进行排序和塞值
    totalJsonArr.push(parentList[j]);
    for (var k = 0; k < treeJson.length; k++) {
        if (treeJson[k]["parent"] == parentList[j].id) {
            childJsonArr.push(treeJson[k]);
        }
    }
    //子元素集合排序
    childJsonArr.sort(function (a, b) {
        return a.order > b.order ? 1 : -1
    });
    for (var i = 0; i < childJsonArr.length; i++) {
        totalJsonArr.push(childJsonArr[i]);
    }
}
console.log("最终父子结构数组排序后为：" + JSON.stringify(totalJsonArr));

输出结果如下所示：

涨薪支持区

期待大家能通过这篇文章学到更多，而且薪资一年更比一年猛！
喜欢博主的话可以上榜一探究竟，博主专设涨薪皇榜给大家查阅，喜欢的可以点击此处查看哟。

---

总结

更多资料大家可以关注csdn博主-《拄杖盲学轻声码》

以上就是今天要讲的内容，本文主要介绍了web数组的排序处理，复杂的数组排序功能，也期待大家分享更多，帅哥美女们给个赞呗，2023年一起加油！！！