JavaScript JSON数组排序实战:单字段与多字段排序详解
作者:函数茶馆时间:2026-10-26 13:02:43浏览:511
本文详细介绍如何在JavaScript中对JSON数组进行排序。通过定义升序和降序比较函数,演示单字段排序的具体实现。同时,针对包含多个字段的复杂JSON数组,提供了多字段排序的代码示例与逻辑说明,帮助开发者快速掌握数组排序技巧。
在JavaScript开发中,对JSON格式的数组进行排序是一项常见需求。
为避免冗长解释,直接展示核心代码实现。
// 升序排列
function up(a, b) {
return a.val-b.val
},
// 降序排列
function down(a, b) {
return b.val-a.val
},
// sort 会直接对原数据排序
testJson.sort(up)具体示例如下:
let test=[{"val":100},{"val":70},{"val":50},{"val":20},{"val":10}]
test=test.sort(up)若需根据JSON数组中的多个字段进行排序,可参考以下代码逻辑。
let newArray = [
{product: "1", matno: "420200011480006",salebillno:"xsdd2733-8", sales: "800"},
{product: "2", matno: "420200011480007",salebillno:"xsdd2733-2", sales: "300"},
{product: "3", matno: "420200011480006",salebillno:"xsdd2733-5", sales: "100"},
{product: "4", matno: "420200011480006",salebillno:"xsdd2733-3", sales: "200"},
{product: "5", matno: "420200011480008",salebillno:"xsdd2738", sales: "600"},
{product: "6", matno: "420200011480010",salebillno:"xsdd2734", sales: "400"},
{product: "7", matno: "420200011480009",salebillno:"xsdd2735", sales: "700"},
{product: "8", matno: "420200011480001",salebillno:"xsdd2737", sales: "500"}
]
/**数组根据数组对象中的某个属性值进行排序的方法
* 使用例子:newArray.sort(sortByArr(['matno'],true)) //表示根据matno属性降序排列;若第二个参数不传递,默认表示升序排序
* @param attr 排序的属性 ['matno','salebillno'...],根据一个字段或者多个字段排序
* @param rev true表示升序排列,false降序排序
* */
function sortByArr(arr, rev) {
if (rev == undefined) {
rev = 1;
} else {
rev = (rev) ? 1 : -1;
}
return function(a, b) {
for (var i = 0; i < arr.length; i++) {
let attr = arr[i]
if (a[attr] != b[attr]) {
if (a[attr] > b[attr]) {
return rev * 1;
} else {
return rev * -1;
}
}
}
}
}
/**升序**/
newArray.sort(sortByArr(['matno','salebillno'],true))
[{product: '8', matno: '420200011480001', salebillno: 'xsdd2737', sales: '500'}
{product: '4', matno: '420200011480006', salebillno: 'xsdd2733-3', sales: '200'}
{product: '3', matno: '420200011480006', salebillno: 'xsdd2733-5', sales: '100'}
{product: '1', matno: '420200011480006', salebillno: 'xsdd2733-8', sales: '800'}
{product: '2', matno: '420200011480007', salebillno: 'xsdd2733-2', sales: '300'}
{product: '5', matno: '420200011480008', salebillno: 'xsdd2738', sales: '600'}
{product: '7', matno: '420200011480009', salebillno: 'xsdd2735', sales: '700'}
{product: '6', matno: '420200011480010', salebillno: 'xsdd2734', sales: '400'}]
/**降序**/
newArray.sort(sortByArr(['matno'],false))
// 输出
[{product: '6', matno: '420200011480010', salebillno: 'xsdd2734', sales: '400'}
{product: '7', matno: '420200011480009', salebillno: 'xsdd2735', sales: '700'}
{product: '5', matno: '420200011480008', salebillno: 'xsdd2738', sales: '600'}
{product: '2', matno: '420200011480007', salebillno: 'xsdd2733-2', sales: '300'}
{product: '1', matno: '420200011480006', salebillno: 'xsdd2733-8', sales: '800'}
{product: '3', matno: '420200011480006', salebillno: 'xsdd2733-5', sales: '100'}
{product: '4', matno: '420200011480006', salebillno: 'xsdd2733-3', sales: '200'}
{product: '8', matno: '420200011480001', salebillno: 'xsdd2737', sales: '500'}]要点总结。
上述内容仅为个人经验分享,旨在为读者提供参考。欢迎支持本站,获取更多技术资讯。
作者最新文章
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
