AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JS对象数组的排序（二十二）下

2021-12-28 102
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS对象数组的排序（二十二）

五. 对象数组的排序


要进行排序的六个对象。 以user 对象为例。


//1.定义要排序的对象。
  var user1={"code":"101","name":"两个蝴蝶飞","age":24,"sex":"男","description":"一个快乐的程序员101"};
  var user2={"code":"102","name":"精灵妹","age":24,"sex":"女","description":"一个快乐的精灵102"};
  var user3={"code":"103","name":"老蝴蝶","age":25,"sex":"男","description":"一个快乐的程序员103"};
  var user4={"code":"104","name":"蝴蝶飞","age":25,"sex":"男","description":"一个快乐的程序员104"};
  var user5={"code":"105","name":"精小妹","age":24,"sex":"女","description":"一个快乐的精灵105"};
  var user6={"code":"106","name":"蝴蝶飞3号","age":24,"sex":"男","description":"一个快乐的程序员106"};


五.一 单纯的对象 sort() 方法


function validateArrF5(){
  //1.定义要排序的对象。
  var user1={"code":"101","name":"两个蝴蝶飞","age":24,"sex":"男","description":"一个快乐的程序员101"};
  var user2={"code":"102","name":"精灵妹","age":24,"sex":"女","description":"一个快乐的精灵102"};
  var user3={"code":"103","name":"老蝴蝶","age":25,"sex":"男","description":"一个快乐的程序员103"};
  var user4={"code":"104","name":"蝴蝶飞","age":25,"sex":"男","description":"一个快乐的程序员104"};
  var user5={"code":"105","name":"精小妹","age":24,"sex":"女","description":"一个快乐的精灵105"};
  var user6={"code":"106","name":"蝴蝶飞3号","age":24,"sex":"男","description":"一个快乐的程序员106"};
  //2. 将对象放置在数组里面。
  var arr=new Array();
  //故意，将2与1调换位置。
  arr.push(user2);
  arr.push(user1);
  arr.push(user3);
  arr.push(user4);
  arr.push(user5);
  arr.push(user6);
  //3. 将数组进行排序。
  arr.sort();  //发现，并没有排序。 是按照数组放置的顺序进行的
  //3.输出新的排序后的数组。
  for(var i=0;i<arr.length;i++){
    console.log((i+1)+":"+JSON.stringify(arr[i]));
  }
}


展示效果:


20190725183833124.png


老蝴蝶发现，并没有排序。 是按照数组放置的顺序进行的。


五.二 比较方法里面写死属性


如果想按照 编号进行排序，那么需要自定义排序方法了。


var compareObject=function(obj1,obj2){
  //内定的，按照排序进行排序。 对象的编号 code 写死在这里面。
  var code1=obj1["code"];
  var code2=obj2["code"];
  //console.log("输出值:"+code1+","+code2);
  //编号，如果是字符串的话，则要先将其转换成字符串。
  //code1=code1.toString();
  //code2=code2.toString();
  if(code1<code2){
    return -1;
  }else if(code1>code2){
    return 1;
  }else{
    return 0;
  }
  // 也可以直接写，  return code1-code2;
}
function validateArrF6(){
  //1.定义要排序的对象。  可以在前面加A变成字符串。
  var user1={"code":"101","name":"两个蝴蝶飞","age":24,"sex":"男","description":"一个快乐的程序员101"};
  var user2={"code":"102","name":"精灵妹","age":24,"sex":"女","description":"一个快乐的精灵102"};
  var user3={"code":"103","name":"老蝴蝶","age":25,"sex":"男","description":"一个快乐的程序员103"};
  var user4={"code":"104","name":"蝴蝶飞","age":25,"sex":"男","description":"一个快乐的程序员104"};
  var user5={"code":"105","name":"精小妹","age":24,"sex":"女","description":"一个快乐的精灵105"};
  var user6={"code":"106","name":"蝴蝶飞3号","age":24,"sex":"男","description":"一个快乐的程序员106"};
  //2. 将对象放置在数组里面。
  var arr=new Array();
  //故意，将2与1调换位置。
  arr.push(user2);
  arr.push(user1);
  arr.push(user3);
  arr.push(user4);
  arr.push(user5);
  arr.push(user6);
  //3. 将数组进行排序。
  arr.sort(compareObject);
  //3.输出新的排序后的数组。
  for(var i=0;i<arr.length;i++){
    console.log((i+1)+":"+JSON.stringify(arr[i]));
  }
}


展示:


20190725183841488.png


其中,obj1 为前一个对象，obj2 为后一个对象。


老蝴蝶把 对象user 的编号 code 硬编码在方法里面， 那么这个方法 compareObject() 便只能按照编号进行排序。 如果想按照年龄进行排序，则需要再重新写一个方法，这样扩展性不好。


五.三 比较的属性由外部传入


如按照年龄进行相应的排序。


var compareObjectByProp=function(prop){
  return function compareObject(obj1,obj2){
    var code1=obj1[prop];
    var code2=obj2[prop];
    //根据属性值的类型，可能需要进行一下相应的判断。
    //如果数字的话，就转换成数字，进行数字之间的比较。 如果是数字的话，要两个都是数字，不然没有意义。 一个数字，另外一个是字符串，那么数字只是数字型的字符串，类型并不是数字。
    if (!isNaN(Number(code1)) && !isNaN(Number(code2))) {
      code1=Number(code1);
      code2=Number(code2);
    }
    return code1-code2;  //代替以前的 if elseif else 的判断。
  }
}
function validateArrF7(){
  //1.定义要排序的对象。  可以在前面加A变成字符串。
  var user1={"code":"101","name":"两个蝴蝶飞","age":24,"sex":"男","description":"一个快乐的程序员101"};
  var user2={"code":"102","name":"精灵妹","age":24,"sex":"女","description":"一个快乐的精灵102"};
  var user3={"code":"103","name":"老蝴蝶","age":25,"sex":"男","description":"一个快乐的程序员103"};
  var user4={"code":"104","name":"蝴蝶飞","age":25,"sex":"男","description":"一个快乐的程序员104"};
  var user5={"code":"105","name":"精小妹","age":24,"sex":"女","description":"一个快乐的精灵105"};
  var user6={"code":"106","name":"蝴蝶飞3号","age":24,"sex":"男","description":"一个快乐的程序员106"};
  //2. 将对象放置在数组里面。
  var arr=new Array();
  //故意，将2与1调换位置。
  arr.push(user2);
  arr.push(user1);
  arr.push(user3);
  arr.push(user4);
  arr.push(user5);
  arr.push(user6);
  //3. 将数组进行排序。 将属性 年龄 age传入进去。
  arr.sort(compareObjectByProp("age"));
  //3.输出新的排序后的数组。
  for(var i=0;i<arr.length;i++){
    console.log((i+1)+":"+JSON.stringify(arr[i]));
  }
}


展示效果:


20190725183850199.png


这样，就可以按照年龄进行相应的排序了。


五.四 传入属性并且传入排序的方式，是升序，还是降序。


如传入年龄，但是是降序排序。


var compareObjectByProp=function(prop,order){
  return function compareObject(obj1,obj2){
    var code1=obj1[prop];
    var code2=obj2[prop];
    //根据属性值的类型，可能需要进行一下相应的判断。
    //如果数字的话，就转换成数字，进行数字之间的比较。 如果是数字的话，要两个都是数字。 一个数字，另外一个是字符串，那么数字只是数字型的字符串，类型并不是数字。
    if (!isNaN(Number(code1)) && !isNaN(Number(code2))) {
      code1=Number(code1);
      code2=Number(code2);
    }
    if(order&&order.toLowerCase()=="desc"){ //有值，并且值为desc
      return code2-code1;
    }
    return code1-code2;  //代替以前的 if elseif else 的判断。
  }
}
function validateArrF8(){
  //1.定义要排序的对象。  可以在前面加A变成字符串。
  var user1={"code":"101","name":"两个蝴蝶飞","age":24,"sex":"男","description":"一个快乐的程序员101"};
  var user2={"code":"102","name":"精灵妹","age":24,"sex":"女","description":"一个快乐的精灵102"};
  var user3={"code":"103","name":"老蝴蝶","age":25,"sex":"男","description":"一个快乐的程序员103"};
  var user4={"code":"104","name":"蝴蝶飞","age":25,"sex":"男","description":"一个快乐的程序员104"};
  var user5={"code":"105","name":"精小妹","age":24,"sex":"女","description":"一个快乐的精灵105"};
  var user6={"code":"106","name":"蝴蝶飞3号","age":24,"sex":"男","description":"一个快乐的程序员106"};
  //2. 将对象放置在数组里面。
  var arr=new Array();
  //故意，将2与1调换位置。
  arr.push(user2);
  arr.push(user1);
  arr.push(user3);
  arr.push(user4);
  arr.push(user5);
  arr.push(user6);
  //3. 将数组进行排序。
  arr.sort(compareObjectByProp("age","desc"));
  //3.输出新的排序后的数组。
  for(var i=0;i<arr.length;i++){
    console.log((i+1)+":"+JSON.stringify(arr[i]));
  }
}



展示效果:


20190725184013763.png


如果传入的order 没有值，那么就默认是 asc, 升序。 如果传入的是asc,那么就是升序。 只有当传入desc 时才是降序。 当然，老蝴蝶这只是一个简单的排序。


五.五 多属性排序


想先按照年龄从小到大排序，如果年龄一致，则按照编号从大到小排序。


这个时候，可不能简单的先按照年龄从小到大排序，然后再编号从大到小排序。


arr=arr.sort(compareObjectByProp("age","asc"));
arr=arr.sort(compareObjectByProp("code","desc"));


这个时候，会以最后的一个排序为准，即以编号从大到小为准。


20190725183937132.png


这个时候，就需要重新写方法了， 写两个属性的方法。


var compareObjectByProp=function(prop1,prop2){
  return function compareObject(obj1,obj2){
    //取出第一列的值。
    var code1=obj1[prop1];
    var code2=obj2[prop1];
    //根据属性值的类型，可能需要进行一下相应的判断。
    //如果数字的话，就转换成数字，进行数字之间的比较。 如果是数字的话，要两个都是数字。 一个数字，另外一个是字符串，那么数字只是数字型的字符串，类型并不是数字。
    if (!isNaN(Number(code1)) && !isNaN(Number(code2))) {
      code1=Number(code1);
      code2=Number(code2);
    }
    //取出第二列的值。
    var code3=obj1[prop2];
    var code4=obj2[prop2];
    //根据属性值的类型，可能需要进行一下相应的判断。
    //如果数字的话，就转换成数字，进行数字之间的比较。 如果是数字的话，要两个都是数字。 一个数字，另外一个是字符串，那么数字只是数字型的字符串，类型并不是数字。
    if (!isNaN(Number(code3)) && !isNaN(Number(code4))) {
      code3=Number(code3);
      code4=Number(code4);
    }
    if(code1<code2){   //升序和降序 写在方法里面，当然，也可以通过参数传入进来。
      return -1;
    }else if(code1>code2){
      return 1;
    }else {
      //return code3-code4;
      return code4-code3;
    }
  }
}
function validateArrF9(){
  //1.定义要排序的对象。  可以在前面加A变成字符串。
  var user1={"code":"101","name":"两个蝴蝶飞","age":24,"sex":"男","description":"一个快乐的程序员101"};
  var user2={"code":"102","name":"精灵妹","age":24,"sex":"女","description":"一个快乐的精灵102"};
  var user3={"code":"103","name":"老蝴蝶","age":25,"sex":"男","description":"一个快乐的程序员103"};
  var user4={"code":"104","name":"蝴蝶飞","age":25,"sex":"男","description":"一个快乐的程序员104"};
  var user5={"code":"105","name":"精小妹","age":24,"sex":"女","description":"一个快乐的精灵105"};
  var user6={"code":"106","name":"蝴蝶飞3号","age":24,"sex":"男","description":"一个快乐的程序员106"};
  //2. 将对象放置在数组里面。
  var arr=new Array();
  //故意，将2与1调换位置。
  arr.push(user2);
  arr.push(user1);
  arr.push(user3);
  arr.push(user4);
  arr.push(user5);
  arr.push(user6);
  //3. 将数组进行排序。  可以进行单个函数的多次调用。
  arr=arr.sort(compareObjectByProp("age","code"));
  //3.输出新的排序后的数组。
  for(var i=0;i<arr.length;i++){
    console.log((i+1)+":"+JSON.stringify(arr[i]));
  }
}


展示:


20190725183927678.png


当然，升序和降序也可以当成参数传入进去， 也可以多个值，如 年龄，成绩，编号 等排序， 但这种情况不常用，一般两个属性就够了，而且是固定好排序的。


这就是对象数组排序的基本方式。


谢谢!!!

文章标签：
JavaScript
关键词：
JavaScript排序
JavaScript数组
JavaScript数组排序
JavaScript对象数组排序
两个蝴蝶飞
目录
相关文章
那年春天
|
3月前
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法，我们可以方便地实现数组的排序和去重。同时，深入理解排序和去重的原理，以及根据实际需求进行适当的优化，能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧，并探索更多的应用可能性。
那年春天
119 59
chnjames
|
3月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南：20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧，涵盖了从基本的添加、移除元素，到数组转换和去重等高级操作。强调了不可变性的重要性，提供了清晰的代码示例，帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者，这些技巧都将显著提升您的编码能力，使您在项目中更具竞争力。
chnjames
50 2
神明木佑
|
3月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
神明木佑
44 3
神明木佑
|
3月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
神明木佑
57 4
邹荣乐
|
3月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍（二）
JavaScript中数组、对象等循环遍历的常用方法介绍（二）
邹荣乐
54 1
小强在此
|
3月前
|
JavaScript 前端开发 Java
【javaScript数组，函数】的基础知识点
【javaScript数组，函数】的基础知识点
小强在此
33 5
Li370234940
|
3月前
|
JavaScript 前端开发 索引
JS 删除数组元素（ 5种方法 ）
JS 删除数组元素（ 5种方法 ）
Li370234940
84 1
神明木佑
|
3月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
神明木佑
34 0
邹荣乐
|
3月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍（一）
JavaScript中数组、对象等循环遍历的常用方法介绍（一）
邹荣乐
43 0
java冯坚持
|
3月前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结，包括插入，删除，更新，反转，排序等，如map、splice等
JavaScript数组的常用高阶函数，包括遍历、插入、删除、更新、反转和排序等操作，如map、splice、push、pop、reverse等。
java冯坚持
25 0

热门文章

最新文章

  • 1
    Node.js 的事件驱动机制
  • 2
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 3
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 4
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 5
    js+jquery实现贪吃蛇经典小游戏
  • 6
    在 golang 中执行 javascript 代码的方案详解
  • 7
    Node.js新作《循序渐进Node.js企业级开发实践》简介
  • 8
    Node.js 的性能
  • 9
    基于SVG的js圆形菜单插件
  • 10
    如何使用内存快照分析工具来分析Node.js应用的内存问题？
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    60
  • 2
    js设计模式-观察者模式与发布/订阅模式
    80
  • 3
    js设计模式-策略模式与代理模式的应用
    80
  • 4
    深入理解JavaScript中的闭包机制
    66
  • 5
    使用Vue.js构建交互式前端的技术探索
    96
  • 6
    使用Node.js构建实时聊天应用的技术指南
    141
  • 7
    深入理解JavaScript中的事件循环机制
    96
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    131
  • 9
    JavaScript 数组方法概览
    42
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    74

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Python语言基础 - 列表、元组、字典、集合

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 常见类型-3：数组元组的方法
  • 常见类型-2：数组和元组
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月