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
  }
})
目录
相关文章
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
1月前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
2月前
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法,我们可以方便地实现数组的排序和去重。同时,深入理解排序和去重的原理,以及根据实际需求进行适当的优化,能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧,并探索更多的应用可能性。
110 59
|
1月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
18 1
JavaScript中对象的数据拷贝
|
1月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
1月前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性,可以在不影响页面渲染的情况下异步加载脚本,并确保脚本的执行顺序。在实际应用中,需要根据具体情况选择合适的加载方式,并注意处理可能出现的问题,以确保页面能够正常加载和执行。
|
2月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
39 2
|
2月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
30 3