PHPIN.NET

 找回密码
 立即注册
查看: 5930|回复: 0

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

[复制链接]

469

主题

31

回帖

5497

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5497
发表于 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的值来排序
函数定义:
  1. function keysrt(key,desc) {
  2.   return function(a,b){
  3.     return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);
  4.   }
  5. }
复制代码

使用:
  1. var ary=[{id:1,name:"b"},{id:2,name:"b"}];
  2. ary.sort(keysrt('name',true));
  3. ary.sort(keysrt('name',false));
  4. ary.sort(keysrt('id',false));
复制代码

Demo Code:
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>demo</title>
  6. </head>
  7. <body>
  8. <div id="element"></div>
  9. <button onclick="paixu('name',0)">name 正序</button>
  10. <button onclick="paixu('name',1)">name 倒序</button>
  11. <button onclick="paixu('age',0)">age 正序</button>
  12. <button onclick="paixu('age',1)">age 倒序</button>
  13. <button onclick="paixu('time',0)">time 正序</button>
  14. <button onclick="paixu('time',1)">time 倒序</button>
  15. <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  16. <script>
  17. var DemoData= [
  18.             {name:"A", age:12,"time":'2016年07月04 15:50:11'},
  19.             {name:"B", age:90,"time":'2016年07月04 15:40:11'},
  20.             {name:"C", age:13,"time":'2016年07月04 15:28:11'},
  21.             {name:"D", age:24,"time":'2016年07月04 15:19:11'}
  22.         ];

  23. function KeySort(key,desc) { // KEY:需要排序的键名 desc:排序类型 true是从大到小 false是反之
  24.     return function(a,b){
  25.         return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);
  26.     }
  27. }
  28. function paixu(key,desc) {

  29.     DemoData.sort(KeySort(key,desc));// 排序处理

  30. // 输出排序后的结果
  31.     var $text = "";
  32.     $.each(DemoData, function (key, value) {
  33.         var $div = "<div>";
  34.         $.each(value, function (key, value) {
  35.             $div += "<span>" + key + ":" + value + "</span>" + "         ";
  36.         });
  37.         $div += "</div>";
  38.         $text = $text + $div;
  39.     })
  40.     $text += "";
  41.     $("#element").html($text);

  42. }
  43. </script>
  44. </body>
  45. </html>
复制代码


附加:两个对象数组,某一项永远置顶并且排序,Code:
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>demo</title>
  6. <style type="text/css">
  7.     .aa{background: #ccc;}
  8. </style>
  9. </head>
  10. <body>
  11. <div id="element"></div>
  12. <button onclick="paixu('name',0)">name 正序</button>
  13. <button onclick="paixu('name',1)">name 倒序</button>
  14. <button onclick="paixu('age',0)">age 正序</button>
  15. <button onclick="paixu('age',1)">age 倒序</button>
  16. <button onclick="paixu('time',0)">time 正序</button>
  17. <button onclick="paixu('time',1)">time 倒序</button>
  18. <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  19. <script>
  20. var Data =[{
  21.     "menufolder":[
  22.     {"name":"A", "age":"12","time":"2016年07月04 15:50:11","type":"menufolder"},
  23.     {"name":"B", "age":"90","time":"2016年07月04 15:40:11","type":"menufolder"},
  24.     {"name":"C", "age":"13","time":"2016年07月04 15:28:11","type":"menufolder"},
  25.     {"name":"D", "age":"24","time":"2016年07月04 15:19:11","type":"menufolder"}
  26.     ],
  27.     "menufile":[
  28.     {"name":"A1", "age":"12","time":"2016年07月04 15:50:11","type":"menufile"},
  29.     {"name":"B1", "age":"90","time":"2016年07月04 15:40:11","type":"menufile"},
  30.     {"name":"C1", "age":"13","time":"2016年07月04 15:28:11","type":"menufile"},
  31.     {"name":"D1", "age":"24","time":"2016年07月04 15:19:11","type":"menufile"}
  32.     ]
  33. }];
  34. function KeySort(key,desc) { // KEY:需要排序的键名 desc:排序类型 true是从大到小 false是反之
  35.     return function(a,b){
  36.         return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);
  37.     }
  38. }

  39. function paixu(key,desc) {
  40.     var a = Data[0].menufolder.sort(KeySort(key,desc));// 排序处理
  41.     var b = Data[0].menufile.sort(KeySort(key,desc));// 排序处理
  42.     var c=new Array();
  43.     var d=c.concat(a,b);
  44.     OutputHtml(d);
  45. }

  46. function OutputHtml(Data) {
  47.     // 输出排序后的结果
  48.     var $text = "";
  49.     $.each(Data, function (key, value) {
  50.         var $div = "<div>";
  51.         if (key % 2 == 0) {
  52.             var $div = "<div class="aa">";
  53.         }
  54.         $.each(value, function (key, value) {
  55.             $div += "<span>" + key + ":" + value + "</span>" + "         ";
  56.         });
  57.         $div += "</div>";
  58.         $text = $text + $div;
  59.     })
  60.     $("#element").html($text);

  61. }
  62. paixu('name',0);
  63. </script>
  64. </body>
  65. </html>

复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-3-28 20:44

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表