陌上人如玉
公子世无双

简单高效的sort排序&经典案例解析


关于javascript的排序我们之前讨论了许多,大致分两部分,基本排序和高级排序
基本排序算法:

  • 冒泡
  • 选择
  • 插入

高级排序算法:

  • 快速
  • 归并

其实关于javascript的排序算法远不止这些,感兴趣的可以自行搜索,我们前端在实际开发过程中遇到排序问题,基本都是写数据量很小的,正常情况下,前端不会出现大量(成千上万)数据的排序,一般的,javascript内置方法,sort()就可以搞定

sort()

介绍一下sort():
sort() 方法用于对数组的元素进行排序。
包含一个可选参数,规定排序顺序。这个参数必须是函数。
既然参数是可选的,那么我们不传参数试试呢
纯数字排序

 let arr = [10,5,40,25,1000,1]
console.log(arr.sort());//=>[1, 10, 1000, 25, 40, 5]

字符串排序

 let str = ['my','name','is','mo','shang','han']
 console.log(str.sort());//=>["han", "is", "mo", "my", "name", "shang"]

含undefined和null

let str1 = ['my','name',undefined,'is','mo','shang','han',null]
console.log(str1.sort());//=>["han", "is", "mo", "my", "name", null, "shang", undefined]

undefined 有些特殊,如果数组中包含undefined,它会被排到尾部,而null会以字符串“null”进行排序
sort()排序后会更新原来的数组
sort()对于纯数字的排序,如果没有参数,既不是倒序也不是正序,这是因为sort将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。
如果对数字进行排序,需要我们传参了参数是一个函数
类似于这样:

let arr = [10, 5, 40, 25, 1000, 1]
function sortFun(a, b) {
    return a - b
}
 console.log(arr.sort(sortFun));//=>?[1, 5, 10, 25, 40, 1000]

es6简化一下

let arr = [10, 5, 40, 25, 1000, 1]
console.log(arr.sort((a,b)=>{
    return  a - b
}))//=>?[1, 5, 10, 25, 40, 1000]

如果是升序就是a-b
如果是降序就是b-a
对于a-b或者b-a,作为sort()的参数sortFun,只有征服之分,没有大小之分
一个例子:

 let arr = [10, 5, 40, 25, 1000, 1]
    function sortFun(a, b) {
      return b - a > 0 ? 1 : -1;
    }
  console.log(arr.sort(sortFun));//=>[1000, 40, 25, 10, 5, 1]

通过sort的这一性能,我们可以实现数组的随机排序

 let arr = [10, 5, 40, 25, 1000, 1]
 function sortFun(a, b) {
     return Math.random()<0.5?1:-1;
 }
console.log(arr.sort(sortFun));//=>[5, 10, 1, 1000, 25, 40]
console.log(arr.sort(sortFun));//=>[40, 1000, 1, 10, 5, 25]

通过sortFun这个方法我们可以看出,sort()排序和冒泡很像,比较相邻的两个元素,但是sort()的执行效率比冒泡高很多,
我们将sort()执行时间和之前的放在一起做一个比较

let arr = []

function arrData(num) {
    for (let i = 0; i < num; i++) {
        arr[i] = Math.floor(Math.random() * num + 1)
    }
}
arrData(100000)
function sortFun(a, b) {
    return a - b
}
console.time(`${arr.length}长度sort排序耗时`)
arr.sort(sortFun)
console.timeEnd(`${arr.length}长度sort排序耗时`)

长度10:
冒泡: 0.0400390625ms
选择: 0.041015625ms
插入:0.01611328125ms
快速:0.10302734375ms
sort(): 0.031005859375ms

长度100:
冒泡: 2.80712890625ms
选择: 0.306884765625ms
插入: 0.201171875ms
快速: 0.22998046875ms
sort(): 0.055908203125ms

长度1000:
冒泡: 11.09912109375ms
选择: 5.80615234375ms
插入: 2.330810546875ms
快速: 4.80908203125ms
sort(): 0.442138671875ms

长度10000:
冒泡: 583.984130859375ms
选择: 62.747802734375ms
插入: 28.248046875ms
快速: 43.587158203125ms
sort(): 5.760986328125ms

长度100000:
冒泡: 51715.775146484375ms
选择: 4505.01513671875ms
插入:2527.210205078125ms
快速: 120.48193359375ms
sort(): 50.47021484375ms

经过比较,我们发现sort()排序从使用方法和执行效率一直都是最优选择

sort实战

在实际工作中,很少会遇到纯数字的排序,一般都是这样的
将以下英雄人物按照id进行排序

//将以下英雄人物按照id进行排序
const hero = [{
    name: "东邪黄药师",
    id: "4"
  },
  {
    name: "西毒欧阳锋",
    id: "6"
  },
  {
    name: "南帝段智兴",
    id: "3"
  },
  {
    name: "北丐洪七公",
    id: "1"
  },
  {
    name: "中神通王重阳",
    id: "9"
  },
];

数组里的元素是一个json对象,按照json对象的某一个属性进行排序
我们可以这么排序

function sortFun(pro) {
  return function (obj1, obj2) {
    let val1 = obj1[pro];
    let val2 = obj2[pro];
    return val1 - val2
    return   val2-val1
    if (val1 < val2) { 
      return -1;
    } else if (val1 > val2) {
      return 1;
    } else {
      return 0;
    }
  }
} 
console.log(hero.sort(sortFun("id")));

输出:

我们可以换个写法

function sortHero(a,b){
    return a.id - b.id
}
console.log(hero.sort(sortHero))

再换个写法

const sortHero = (a, b) => {
  return a.id - b.id
}
console.log(hero.sort(sortHero))

事件工作中的需求可能比这个还要复杂一点
继续五大高手的:
将五大高手按照年龄由低到高排序,年龄相同的按照id由小到大排序
(据郭靖说五大高手的年龄是黄蓉告诉他的,不知道郭靖有没有骗我)

const hero = [{
    name: "东邪黄药师",
    age: '53',
    id: "4"
  },
  {
    name: "西毒欧阳锋",
    age: '42',
    id: "6",
  },
  {
    name: "南帝段智兴",
    age: '67',
    id: "3"
  },
  {
    name: "北丐洪七公",
    age: '53',
    id: "1"
  },
  {
    name: "中神通王重阳",
    age: '53',
    id: "9",
  },
];
const sortHeroByAge = (a, b) => {
    if (a.age === b.age) {
        return a.id - b.id
    } else {
        return a.age - b.age
    }
}
console.log(hero.sort(sortHeroByAge))

输出:

javascript中sort()排序经常会用到

手机整理了一套原生js教程,公众号后台回复“js教程”即可领取

参考链接
js — 对象排序(根据对象的某一属性)

赞(0) 打赏
未经允许不得转载:陌上寒 » 简单高效的sort排序&经典案例解析

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

微信扫一扫

支付宝扫一扫