JS 对象数组Array 根据对象object key的值排序sort

admin · 发表于 2016-7-4 15:18:04

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

JS 对象数组Array 根据对象object key的值排序sort

有个js对象数组 var ary=[{id:1,name:"b"},{id:2,name:"b"}] 需求是根据name 或者 id的值来排序
函数定义:

function keysrt(key,desc) {
return function(a,b){
return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);
}
}

复制代码

使用:

var ary=[{id:1,name:"b"},{id:2,name:"b"}];
ary.sort(keysrt('name',true));
ary.sort(keysrt('name',false));
ary.sort(keysrt('id',false));

复制代码

Demo Code：

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>demo</title>
</head>
<body>
<div id="element"></div>
<button onclick="paixu('name',0)">name 正序</button>
<button onclick="paixu('name',1)">name 倒序</button>
<button onclick="paixu('age',0)">age 正序</button>
<button onclick="paixu('age',1)">age 倒序</button>
<button onclick="paixu('time',0)">time 正序</button>
<button onclick="paixu('time',1)">time 倒序</button>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
var DemoData= [
{name:"A", age:12,"time":'2016年07月04 15:50:11'},
{name:"B", age:90,"time":'2016年07月04 15:40:11'},
{name:"C", age:13,"time":'2016年07月04 15:28:11'},
{name:"D", age:24,"time":'2016年07月04 15:19:11'}
];
function KeySort(key,desc) { // KEY：需要排序的键名 desc：排序类型 true是从大到小 false是反之
return function(a,b){
return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);
}
}
function paixu(key,desc) {
DemoData.sort(KeySort(key,desc));// 排序处理
// 输出排序后的结果
var $text = "";
$.each(DemoData, function (key, value) {
var $div = "<div>";
$.each(value, function (key, value) {
$div += "<span>" + key + "：" + value + "</span>" + " ";
});
$div += "</div>";
$text = $text + $div;
})
$text += "";
$("#element").html($text);
}
</script>
</body>
</html>

复制代码

附加：两个对象数组，某一项永远置顶并且排序，Code：

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>demo</title>
<style type="text/css">
.aa{background: #ccc;}
</style>
</head>
<body>
<div id="element"></div>
<button onclick="paixu('name',0)">name 正序</button>
<button onclick="paixu('name',1)">name 倒序</button>
<button onclick="paixu('age',0)">age 正序</button>
<button onclick="paixu('age',1)">age 倒序</button>
<button onclick="paixu('time',0)">time 正序</button>
<button onclick="paixu('time',1)">time 倒序</button>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
var Data =[{
"menufolder":[
{"name":"A", "age":"12","time":"2016年07月04 15:50:11","type":"menufolder"},
{"name":"B", "age":"90","time":"2016年07月04 15:40:11","type":"menufolder"},
{"name":"C", "age":"13","time":"2016年07月04 15:28:11","type":"menufolder"},
{"name":"D", "age":"24","time":"2016年07月04 15:19:11","type":"menufolder"}
],
"menufile":[
{"name":"A1", "age":"12","time":"2016年07月04 15:50:11","type":"menufile"},
{"name":"B1", "age":"90","time":"2016年07月04 15:40:11","type":"menufile"},
{"name":"C1", "age":"13","time":"2016年07月04 15:28:11","type":"menufile"},
{"name":"D1", "age":"24","time":"2016年07月04 15:19:11","type":"menufile"}
]
}];
function KeySort(key,desc) { // KEY：需要排序的键名 desc：排序类型 true是从大到小 false是反之
return function(a,b){
return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);
}
}
function paixu(key,desc) {
var a = Data[0].menufolder.sort(KeySort(key,desc));// 排序处理
var b = Data[0].menufile.sort(KeySort(key,desc));// 排序处理
var c=new Array();
var d=c.concat(a,b);
OutputHtml(d);
}
function OutputHtml(Data) {
// 输出排序后的结果
var $text = "";
$.each(Data, function (key, value) {
var $div = "<div>";
if (key % 2 == 0) {
var $div = "<div class="aa">";
}
$.each(value, function (key, value) {
$div += "<span>" + key + "：" + value + "</span>" + " ";
});
$div += "</div>";
$text = $text + $div;
})
$("#element").html($text);
}
paixu('name',0);
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

[高手进阶] JS 对象数组Array 根据对象object key的值排序sort

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。