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

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

2021-12-28 146
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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对象数组排序
两个蝴蝶飞
目录
相关文章
游客lijmi4663rgsa
|
8月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能，JS中排序算法的使用详解（附实际应用代码）
Array.sort() 是一个功能强大的方法，通过自定义的比较函数，可以处理各种复杂的排序逻辑。无论是简单的数字排序，还是多字段、嵌套对象、分组排序等高级应用，Array.sort() 都能胜任。同时，通过性能优化技巧（如映射排序）和结合其他数组方法（如 reduce），Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
743 3
游客lijmi4663rgsa
|
8月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图，全网最全构建完整知识网络！js数组操作方法全集（实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解，附大量源码和易错点解析）
这些方法提供了对数组的全面操作，包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆，并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用，方便您理解数组操作的底层原理。链式调用的几个案例，让您玩转数组操作。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
282 2
游客lijmi4663rgsa
|
8月前
|
JavaScript 前端开发 API
JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等，array.map(）的使用详解（附实际应用代码）
array.map(）可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等，比for好用太多了，主要是写法简单，并且非常直观，并且能提升代码的可读性，也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
518 1
游客lijmi4663rgsa
|
8月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用，JS中数组过滤器的使用详解（附实际应用代码）
用array.filter(）来实现数据筛选、数据清洗和链式调用，相对于for循环更加清晰，语义化强，能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
651 0
那年春天
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法，我们可以方便地实现数组的排序和去重。同时，深入理解排序和去重的原理，以及根据实际需求进行适当的优化，能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧，并探索更多的应用可能性。
那年春天
357 59
chnjames
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南：20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧，涵盖了从基本的添加、移除元素，到数组转换和去重等高级操作。强调了不可变性的重要性，提供了清晰的代码示例，帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者，这些技巧都将显著提升您的编码能力，使您在项目中更具竞争力。
chnjames
219 2
神明木佑
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
神明木佑
406 3
神明木佑
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
神明木佑
356 4
邹荣乐
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍（二）
JavaScript中数组、对象等循环遍历的常用方法介绍（二）
邹荣乐
176 1
神明木佑
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
神明木佑
203 0

热门文章

最新文章

  • 1
    Chrome 下载大文件报错！用 Streamsaver.js 完美填坑
  • 2
    百宝箱开放平台 ✖️ Node.js SDK
  • 3
    局域网监控其他电脑的设备信息管理 Node.js 跳表算法
  • 4
    必知的技术知识：js保留二位小数
  • 5
    解析Vue.js中的computed工作原理
  • 6
    转载：JS进度条
  • 7
    [JS1] 如何嵌入
  • 8
    接口规范，js处理json，php返回给ajax的数据格式
  • 9
    详细分析 javascript 的内存分配
  • 10
    js21---单体（单例）模式
  • 1
    仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
    2113
  • 2
    个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
    634
  • 3
    个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
    1018
  • 4
    征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
    1499
  • 5
    银行流水生成器在线制作，银行流水虚拟生成器app，h5+js+css【仅供学习用途】
    3318
  • 6
    制作b超单生成器， 假怀孕b超单图片制作， p图医院证明【css+html+js装逼恶搞神器】
    563
  • 7
    医院检查单子p图软件，在线制作仿真病历，js+css+html装逼神器
    718
  • 8
    处方单图片生成器， 处方单在线制作免费，js+css+html恶搞神器
    1263
  • 9
    病历单生成器在线制作，病历单生成器app，HTML+CSS+JS恶搞工具
    3013
  • 10
    抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
    860

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例
    • 下一篇
    阿里云对象存储OSS收费标准：500G存储118元1年、