API之sort方法原理和使用

目录

    • 定义
    • 方法原理
    • arr.sort([compareFunction])的使用
      • compareFunction部分省略
      • compareFunction部分使用
        • 升序使用
        • 降序使用
        • 乱序使用
        • 给对象排序
    • 总结

定义

sort() 方法用原地算法对数组的元素进行排序,并返回数组。

  • 语法
    arr.sort([compareFunction])
    compareFunction 可选。规定排序顺序。必须是函数。
  • 返回值
    排序后的数组。请注意,数组在原数组上进行排序
  • 排序
  1. 默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的
  2. 自定义:排序顺序可以是字母或数字,并按升序或降序
    由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。

方法原理

需要注意的是,上面的语法中的compareFunction部分虽然是可选,但是如果要弄懂这个API我们必须搞懂这些

  1. 如果compareFunction部分省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。

  2. 如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序。
    即假设 a 和 b 是两个将要被比较的元素:
    如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
    如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。
    备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
    如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
    compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
    下面我们将对每一种情况进行演示

arr.sort([compareFunction])的使用

compareFunction部分省略

元素按照转换为的字符串的各个字符的Unicode位点进行排序
例子来啦:

		var arr = ['ab', 'abc', 'bbb', 'aney', 'def']
        console.log(arr.sort())

猜猜排序结果如何
揭秘答案:
API之sort方法原理和使用_第1张图片
我们可以发现他们按字母的顺序排好序了,第一位一样的按后面的顺序也已经排好,他会先比较第一位的万国码,具体的这里不作叙述,可以自己查询表格;这是不是像极了生活中名字拼音按字母排序。那么如果我们用来排年龄行不行呢?下面我们来试一试:

		var age = [15, 12, 5, 3, 8, 7, 25]
        console.log(age.sort())

直接看结果:
API之sort方法原理和使用_第2张图片
诶,好像翻车了,显然我们后面的3,7,5,7,8要小于前面的数,于是这里我们就要用到我们的compareFunction部分了;看下面

compareFunction部分使用

升序使用

假如我们要将上面的数字从小到大排列,那么我们可以这么做

		 age.sort(function(a, b) {
		            return a - b
		        })
       	 console.log(age)

看看结果
API之sort方法原理和使用_第3张图片
实现了,那么让我们看看降序的实现吧;

降序使用

还是使用上面的数字,我们来实现从大到小排列

		age.sort(function(b, a) {
		            return a - b
		        })
        console.log(age)

直截了当看结果
API之sort方法原理和使用_第4张图片
perfect!!!
但是在生活中我们也常常遇到一种情况,将一组有序数据打乱,那么这个时候我们可以来看看乱序怎么实现;

乱序使用

        var num = [1, 2, 3, 4, 5, 6, 7, 8]
       num.sort(function() {
            // 后面减的数是随机的0-1之间的数,这里取决于你想打乱的程度,建议取值范围在(0.1-0.9)之间,效果比较明显
            return Math.random() - 0.5;
        })
        console.log(num)

看看结果
API之sort方法原理和使用_第5张图片
我们发现顺序被打乱了。

给对象排序

上面介绍了字符串和数字类型的排序方式,生活中还容易出现一种情况,大家从小到大都不喜欢面对的事情,每次考试完,成绩排序,那么我们怎么实现它呢,看例子

		var li = {
            name: 'li',
            score: 60,
        }
        var liu = {
            name: 'liu',
            score: 98,
        }
        var luo = {
            name: 'luo',
            score: 76,
        }
        var stus = [li, liu, luo]
        stus.sort(function(a, b) {
            return a['score'] - b['score']
        })
        console.log(stus)

下面我们来掌声欢迎成绩最好的同学:
API之sort方法原理和使用_第6张图片
按照习惯,成绩好的当然放上面,所以这里使用了降序排列,如果想要压轴出场将function中的a,b调换顺序就可以,当然我们也可以使用reserve()将上面的结果翻转来解决

总结

排序的方法有很多,API,冒泡排序等等,希望大家依照自己的使用场景和情况理性选择~

你可能感兴趣的:(小白,css,javascript)