关于js中sort()排序方法 JS

shuke 2018-10-30 1862


关于js中sort()排序方法

  第一次写这个,算是记录自己的学习前端的一点点的历程吧。今天在做一个图片的随机排序遇到了一个问题

var imgjson={img:["1,jpg","3.jpg","2.jpg"],"tex":["pic1","pic3","pic2"]}


我用的是json格式存储数组,想通过排序实现img数组中的内容升序或是降序发现用sort自带的方法不行,w3school上的原话是:


sort() 方法用于对数组的元素进行排序,arrayObject.sort(sortby)  (记住sort方法排序改变的是原有的数组不生成副本)如果调用该方法时没有使用参数,将按字母顺序(Ascall编码)对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。


如果要想进行升序或是降序排序的话,要提供比较函数。

比较函数应该具有两个参数 a 和 b,其返回值如下:

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。

什么意思呢,默认a,b两个参数 若是 a-b 若是 小于 0则 a前b后 ,大于0 则 a后b前。 

                     若是b-a  若是 小于0 则 a前b后 ,大于0 则 a后b前。

通过调试发现默认情况下,a-b时 a的值都是比b小(随机出现) 故会出现升序情况 故返回值都是小于0的

                                       b-a时 b的值都是比a大,故会出现降序情况 故返回值都是大于0的

下面附上调试截图:


 

总结一下就是:随机选取的a,b两个值通常情况下,都是a的值比b小,排序规则是根据返回值,小于0则 升序 大于0 则降序,

                     第一参数a, 第二参数b ------  a-b升序   b-a降序。

源文:https://www.cnblogs.com/fansama/p/6084195.html

最新回复 (2)
全部楼主
  • shuke 2018-10-30
    2


    JavaScript提供了sort()方法和reverse()方法,使得我们可以简单的对数组进行排序操作和逆序操作。其中:

    1.JavaScript的sort()中如果没有指定比较函数,则默认会按照字符的编码顺序进行升序排序。也就是说如果我们想要对数值进行排序得到的不一定是我们想要的结果。

    2.Javascript的reverse()将数组中的元素逆序。

     

    先看看上面的第一点,如果有一个数组arr=[1,6,3,7,9],使用arr.sort()后,数组的顺序为1,3,6,7,9,得到了我们想要的结果。

    再看看下面的一个数组排序:arr=[3,1,16,34,30],如果执行arr.sort()后是不是还是会得到我们想要的1,3,16,30,34呢?

    执行后我们发现结果为:1,16,3,30,34,显然结果不是我们想要的。实际上,sort方法将上面的数值按照字符串方式排序了,也就是说和数组arr1=['3','1','16','34','30']的排序结果一致。

    代码如下:

    var arr=[3,1,16,34,30];    

    var arr1=['3','1','16','34','30'];    

    alert(arr.sort());         // 1,16,3,30,34   

    alert(arr1.sort());        // 1,16,3,30,34


    那么如果我们想要得到正确的结果:1,3,16,30,34 应该怎么去做呢?

    查询javascript手册,手册中的说明如下:

    ====================================

    定义和用法

    sort() 方法用于对数组的元素进行排序。

    语法

    arrayObject.sort(sortby)参数描述sortby可选。规定排序顺序。必须是函数。 

    返回值

    对数组的引用。请注意,数组在原数组上进行排序,不生成副本。

    说明

    如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

    如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

    • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

    • 若 a 等于 b,则返回 0。

    • 若 a 大于 b,则返回一个大于 0 的值。

    =====================================

    由以上说明我们可以了解到,如果要按照数值进行排序,那么就要提供一个比较函数。一般常见的比较函数如下:

     

    function sortArr(m,n){        

    if(m<n)           

    return -1;     //小于,返回-1        

    else if(m>n)           

    return 1;     //大于,返回1        

    else return 0;//等于,返回0   

     }

     

    精简后可以写成如下两种形式:

     

    function sortArr(m,n){   

     return m-n;

    }

     

    function sortArr(m,n){   

     return m>n?1:(m<n?-1:0);

    }

     

    然后执行arr.sort(sortArr),发现可以得到我们想要的结果:1,3,16,30,34.也就说将数组按照整型数值进行了升序排序。
    这样的话新的问题就来了,如果我们想要对数组进行降序排序怎么做呢?

    有一思路就是改变sortArr函数的返回值,如果m<n时返回正直,m>n时返回负值,m=n时返回0。这样就可以了。

    你可以写两个函数,一个升序,一个降序。然后根据不同的需要调用不同的函数就可以了。

    此外我们还可以调用上面提到的另一个函数reverse()来轻松的实现,当我们进行升序排序后,然后数组在调用reverse()方法将数组逆序,这样就可以实现数组的降序排序了。

    代码如下:

    arr.sort(sortArr).reverse();


    总结:这里主要介绍了Javascript中数组的排序,由于默认按照字符串排序,要实现按照其他形式的规则排序就要自己定义比较函数了。

     

    demo:

     

    <script language="javascript">

    oldArray=[5000,250,600,150]

    document.write("oldArray:"+oldArray+"<br>")

    document.write("反转递减排序:".fontcolor("#00FFFF")+oldArray.reverse()+"<br>")

     

    function myUpSort(x,y){return x-y}

    document.write("数量递增排序:".fontcolor("#FF0000")+oldArray.sort(myUpSort)+"<br>")

     

    function myDownSort(x,y){return y-x}

    document.write("数量递减排序:".fontcolor("#00FF00")+oldArray.sort(myDownSort)+"<br>")

    document.write("反转递减排序:".fontcolor("#0000FF")+oldArray.reverse(myUpSort)+"<br>")//对上一句的反转

    </script>

     

    页面输出:

     

    oldArray:5000,250,600,150
    反转递减排序:150,600,250,5000
    数量递增排序:150,250,600,5000
    数量递减排序:5000,600,250,150
    反转递减排序:150,250,600,5000


  • shuke 2018-10-30
    3


    今天来谈一谈sort()函数,sort() 方法用于对数组的元素进行排序,用法为arrayObject.sort(sortby);括号中的为可选参数,准确来说应该是一个函数,这个函数用来规定排序方法,不然sort怎么知道你想怎么排,从大到小还是从小到大,你不跟它说它只能按它自己的方法排,如果你对它不熟悉的话,排出来的结果分分钟让你懵逼,需要说明的是,它是在原数组上排序的,不生成副本。

    排序方法:如果你不给它指定方法的话,它会按照字符编码的顺序进行排序,对数字的话排出来基本没什么卵用,所以你要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

    若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

    若 a 等于 b,则返回 0。

    若 a 大于 b,则返回一个大于 0 的值。

    举个简单的例子:

    var arr=[1,5,87,3,9,57,8,9,10];

    arr.sort(function(a,b){return a-b;})

    排出来的顺序就是:1,3,5,8,9,10,57,87.也就是从小到大排,是不是很神奇,如果return b-a的话就从大到小排,这个例子简直是sort的成名函数啊,我第一次看到直接震惊了,当然也可以写的详细一点

    arr.sort(function(a,b){ 

    if(a>b) {return 1; 
    }else{ 
    return -1 

    } .

     

    arrayObject.sort(sortby)


返回