欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

搞定排序问题!JavaScript sort()方法详解

最编程 2024-02-02 08:05:08
...

1.升序(从小到大)

arr.sort(function(a,b){//升序排序
  if(a<b){return -1;}//小于0  不换位置,因为现在a在b的前面 a<b,这是我们想要的,所以不换位置
  else if(a>b){return 1;}//大于0  换位置,因为升序嘛,肯定是要让小的在前面,而现在a>b,所以要换成b a
  else{return 0;}//a和b相等,不换位置
});

这里就是我们自己可以用一个比较函数(回调函数)来设置排序规则,用返回值来告诉这个方法,在进行两个数字比较的时候,交不交换位置:

  • 如果返回值是-1或者是小于0的值,a,b不需要换位置
  • 如果返回值是1或者是大于0的值,a,b需要换位置
  • 如果返回值是0,a,b相等,不需要换位置,

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.那么降序(从大到小),也就简单了:

arr.sort(function(a,b){
  if(a<b){return 1;}//我们需要的是降序,而这里a<b,不是我们想要的,我们想要 b a,所以要换位置→return 1
  else if(a>b){return -1;}//这里a>b,刚好是我们需要的,所以不用换位置,直接return -1
  else{return 0;}//相等,不换
});

另外提一句:a,b相等,不换位置,这里换不换都无所谓,毕竟相等。不过不同的浏览器可能有的交换位置,有的不交换,不过这个我们不需要关心。

有个问题产生

其实不同的浏览器对这个sort排序方法的实现是不一样的,火狐用的是归并排序,谷歌用的是改进版快速排序。

提这句话,是因为开始遇到一个问题:

arr = [5,4];
arr.sort(function(a,b){//括号里是回调函数
   console.log("a=" +a);
   console.log("b=" +b);
});
console.log(arr);

上面代码把数组的元素取出来,作为实参传递给function这个函数的形参a,b输出时,在不同的浏览器,a和b的值是不一样的:

在火狐会输出:a = 5; b = 4;

在谷歌/ie/edge:a = 4; b = 5; 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

产生错误的过程:

我是在谷歌浏览器进行调试的,所以开始跟sort方法的结论一样,我以为 a = 数组前一个值,b=数组后一个值,那么就是a = 5,b = 4.

然而在谷歌浏览器输出却是a = 4,b = 5,然后我刚好又看到我楼上那位兄弟说的,应该是b应该都是在a的前面,也就是arr = [第一个,第二个],这样它取元素不就是b=第一个,a=第二个。

再然后我就一想,这函数中那个返回值的规则不是也要换了么:

  • 此时不就是 b在前,a在后了么,那么b<a,刚好满足升序 所以不换位置,直接return -1
  • b>a,不满足升序,要达成a b,那么要换位置,直接return 1
  • b=a,相等,不换位置,return 0

可是原本一个本意实现升序的,结果在浏览器中执行结果是降序的。(当然火狐也是一样降序的)

困扰了我很久,然后我输出a,b的值,去试了好几个浏览器,终于在火狐浏览器发现端倪:

在火狐会输出:a = 5; b = 4;

在谷歌/ie/edge:a = 4; b = 5; 

我逐渐意识到也许我们在进行这个sort排序方法时,我们自身不需要去考虑数组元素赋值时,到底把第一个元素赋值给a,还是b。

搜了很多人的博客,发现几年前的谷歌调试代码,上面ab输出也是a = 5; b = 4;

只不过它后续更新升级,然后就改变成现在这样了a=4 b=5

但是无论火狐还是谷歌,他们最终实现的排序效果都是一样的,都是升序或都是降序

故此,得出一个结论,我们不需要去关注a,b(到底前面的传递给a,还是后面的传递给a)

我们需要记住的就是:

a在前,b在后,然后a<b时,不换位置,return -1;(我们需要升序的时候)

a>b时,换位置,return 1;(我们需要升序的时候)

a=b时,不换位置,return 0;

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

需要降序的时候,return 1 和 return -1换个位置就行了

最终进阶:直接就升序:return a-b;

(升序,如果a<b,返回值小于0,是我们想要的,不换位置;如果a>b,大于0,不是我们想要的,所以换位置)

同理,降序:return b-a;

九亿少女脚臭

   九亿少女脚臭

  pp7***74714@gmail.com

3年前 (2021-03-15)