js 排序—— sort() 对普通数组、对象数组(单属性/多属性)排序

简介: js 排序—— sort() 对普通数组、对象数组(单属性/多属性)排序

不传参数,默认按照字符编码的顺序进行排序(数字不会按大小排序!!!

var arr = ['General','Tom','Bob','John','Army'];
var resArr = arr.sort();
console.log(resArr);//输出 ["Army", "Bob", "General", "John", "Tom"]
 
var arr2 = [30,10,111,35,1899,50,45];
var resArr2 = arr2.sort();
console.log(resArr2);//输出 [10, 111, 1899, 30, 35, 45, 50]

普通数组排序

升序(从小到大)

var arr3 = [30,10,111,35,1899,50,45];
arr3.sort(function(a,b){
  return a - b;
})
console.log(arr3);//输出 [10, 30, 35, 45, 50, 111, 1899]

降序(从大到小)

var arr4 = [30,10,111,35,1899,50,45];
arr4.sort(function(a,b){
  return b - a;
})
console.log(arr4);//输出 [1899, 111, 50, 45, 35, 30, 10]

获取最大值

function getMax(arr) {
    if (arr != null && (arr instanceof Array) && arr.length > 0) {
        let arr2 = arr.concat([]);
        arr2.sort(function (a, b) { return a - b })
        let max = arr2[arr2.length - 1];
        return max;
    }
    return null;
}
 
var arr7 = [30,10,111,35,1899,50,45];
let max = getMax(arr7)
console.log(max); //得到 1899

对象数组排序——单属性排序

按id属性升序排列

var arr5 = [{id:10},{id:5},{id:6},{id:9},{id:2},{id:3}];
arr5.sort(sortBy('id',1))
//attr:根据该属性排序;rev:升序1或降序-1,不填则默认为1
function sortBy(attr,rev){
    if( rev==undefined ){ rev=1 }else{ (rev)?1:-1; }
    return function (a,b){
        a=a[attr];
        b=b[attr];
        if(a<b){ return rev*-1}
        if(a>b){ return rev* 1 }
        return 0;
    }
}
console.log(arr5);
//输出新的排序
// {id: 2}
// {id: 3}
// {id: 5}
// {id: 6}
// {id: 9}
// {id: 10}

获取最大值——对象数组中的指定属性

function getObjArrMax(arr, prop) {
    if (arr != null && (arr instanceof Array) && arr.length > 0) {
        let arr2 = arr.concat([]);
        arr2.sort(function (a, b) { return a[prop] - b[prop] })
        let max = arr2[arr2.length - 1][prop];
        return max;
    }
    return null;
}
 
let arr8 = [{id:10},{id:5},{id:6},{id:9},{id:2},{id:3}];
let max = getObjArrMax(arr8,'id')
console.log(max); //得到10

对象数组排序——多属性

先根据id升序,id相同的根据age降序

var arr6 = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}];
arr6.sort(function(a,b){
  if(a.id === b.id){//如果id相同,按照age的降序
    return b.age - a.age
  }else{
    return a.id - b.id
  }
})
console.log(arr6);
//输出新的排序
// {id: 2, age: 8}
// {id: 5, age: 4}
// {id: 6, age: 10}
// {id: 9, age: 6}
// {id: 10, age: 9}
// {id: 10, age: 2}

更多属性排序,不断嵌套即可(时间类的数据,可以先转换为时间格式再比较)

// 排序顺序:today   status  doDate   doTime
this.data.sort(function(a, b) {
  if (a.today === b.today) {
    if (a.status === b.status) {
      if (a.doDate === b.doDate) {
        // 时间字符串转换为时间进行比较
        return (new Date(a.doDate + ' ' + a.doTime)) - (new Date(b.doDate + ' ' + b
          .doTime))
      } else {
        // 当 doDate 为空时
        if (!a.doDate && !b.doDate) {
          return 0
        } else if (!a.doDate) {
          return -1
        } else if (!b.doDate) {
          return 1
        } else {
          // 时间字符串转换为时间进行比较
          return (new Date(a.doDate)) - (new Date(b.doDate))
        }
      }
    } else {
      return a.status - b.status
    }
  } else {
    return b.today - a.today
  }
})
目录
相关文章
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
365 1
|
11月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法,我们可以方便地实现数组的排序和去重。同时,深入理解排序和去重的原理,以及根据实际需求进行适当的优化,能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧,并探索更多的应用可能性。
425 59
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
260 56
|
11月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性,可以在不影响页面渲染的情况下异步加载脚本,并确保脚本的执行顺序。在实际应用中,需要根据具体情况选择合适的加载方式,并注意处理可能出现的问题,以确保页面能够正常加载和执行。
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
286 2
|
存储 JavaScript 前端开发

热门文章

最新文章