sort()介绍

作者: 泪滴在琴上 | 来源:发表于2022-05-07 10:30 被阅读0次

    sort():对数组的元素进行从小到大来排序(会改变原来的数组)

    如果在使用 sort() 方法时不带参,

    默认排序顺序是在将元素转换为字符串按照Unicode 编码,从小到大进行排序
    举例 1:(当数组中的元素为字符串时)

    let arr1 = ['e', 'b', 'd', 'a', 'f', 'c'];
    let result = arr1.sort(); // 将数组 arr1 进行排序
    console.log('arr1 =' + JSON.stringify(arr1));
    console.log('result =' + JSON.stringify(result));
    

    结果:

    arr1 =["a","b","c","d","e","f"]
    result =["a","b","c","d","e","f"]
    

    从上方的打印结果中,我们可以看到,sort 方法会改变原数组,而且方法的返回值也是同样的结果
    举例 2:(当数组中的元素为数字时)

    let arr2 = [5, 2, 11, 3, 4, 1];
    let result = arr2.sort(); // 将数组 arr2 进行排序
    console.log('arr2 =' + JSON.stringify(arr2));
    console.log('result =' + JSON.stringify(result));
    

    结果:

    arr2 = [1,11,2,3,4,5]
    result = [1,11,2,3,4,5]
    

    上方的打印结果中,你会发现,使用 sort() 排序后,数字11竟然在数字2的前面。这是为啥呢?因为上面讲到了,sort()方法是按照Unicode 编码进行排序的。
    那如果我想让 arr2 里的数字,完全按照从小到大排序,怎么操作呢?继续往下看。

    sort()方法:带参时,自定义排序规则

    如果在 sort()方法中带参,我们就可以自定义排序规则。具体做法如下:
    我们可以在 sort()添加一个回调函数,来指定排序规则。
    回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数。
    浏览器根据回调函数的返回值来决定元素的排序:(重要)
    如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
    如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变
    如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前
    如果只是看上面的文字,可能不太好理解,我们来看看下面的例子,你肯定就能明白

    let arr = [5, 2, 11, 3, 4, 1];
    arr.sort(function (a, b) {
      console.log("a:" + a, "b:" + b);
    });
    /*
      a:2 b:5
      a:11 b:2
      a:3 b:11
      a:4 b:3
      a:1 b:4
    */
    

    举例:将数组中的数字按照从小到大排序

    写法 1:

    let arr = [5, 2, 11, 3, 4, 1];
    
    // 自定义排序规则
    let result = arr.sort(function (a, b) {
        if (a > b) {
            // 如果 a 大于 b,则 b 排列 a 之前
            return 1;
        } else if (a < b) {
            // 如果 a 小于 b,,则 a 排列 b 之前
            return -1;
        } else {
            // 如果 a 等于 b,则位置不变
            return 0;
        }
    });
    
    console.log('arr =' + JSON.stringify(arr));
    console.log('result =' + JSON.stringify(result));
    

    结果:

    arr = [1, 2, 3, 4, 5, 11];
    result = [1, 2, 3, 4, 5, 11];
    

    写法 2:优化了写法1

    let arr = [5, 2, 11, 3, 4, 1];
    
    // 自定义排序规则
    let result = arr.sort(function (a, b) {
        return a - b; // 升序排列
        // return b - a; // 降序排列
    });
    
    console.log('arr =' + JSON.stringify(arr));
    console.log('result =' + JSON.stringify(result));
    

    上方代码还可以写成 ES6 的形式,也就是将 function 改为箭头函数,其写法如下
    写法3:箭头函数

    let arr = [5, 2, 11, 3, 4, 1];
    
    // 自定义排序规则
    let result = arr.sort((a, b) => {
        return a - b; // 升序排列
    });
    
    console.log('arr =' + JSON.stringify(arr));
    console.log('result =' + JSON.stringify(result));
    

    上方代码,因为函数体内只有一句话,所以可以去掉 return 语句,继续简化为如下写法

    写法 4:(推荐)

    let arr = [5, 2, 11, 3, 4, 1];
    
    // 自定义排序规则:升序排列
    let result = arr.sort((a, b) => a - b);
    
    console.log('arr =' + JSON.stringify(arr));
    console.log('result =' + JSON.stringify(result));
    

    sort 方法举例:将数组按里面某个字段从小到大排序

    将数组从小到大排序,这个例子很常见。但在实际开发中,总会有一些花样。

    下面这段代码,在实际开发中,经常用到,一定要掌握。完整代码如下:

    let dataList = [
            {
              title: "品牌鞋子,高品质低价入手",
              publishTime: 200,
            },
            {
              title: "不是很贵,但是很暖",
              publishTime: 100,
            },
            {
              title: "无法拒绝的美食,跟我一起吃吃",
              publishTime: 300,
            },
          ];
    
     console.log("qianguyihao 排序前的数组:" + JSON.stringify(dataList));
    
          // 将dataList 数组,按照 publishTime 字段,从小到大排序。(会改变原数组)
          dataList.sort((a, b) => parseInt(a.publishTime) -                                           parseInt(b.publishTime));
     console.log("qianguyihao 排序后的数组:" + JSON.stringify(dataList));
    

    结果:

    qianguyihao 排序前的数组:[
        {"title":"品牌鞋子,高品质低价入手","publishTime":200},
        {"title":"不是很贵,但是很暖","publishTime":100},
        {"title":"无法拒绝的美食,跟我一起吃吃","publishTime":300}
    ]
    
    qianguyihao 排序后的数组:[
        {"title":"不是很贵,但是很暖","publishTime":100},
        {"title":"品牌鞋子,高品质低价入手","publishTime":200},
        {"title":"无法拒绝的美食,跟我一起吃吃","publishTime":300}
    ]
    

    上方代码中,有人可能会问: publishTime 字段已经是 Number 类型了,为啥在排序前还要做一次 parseInt() 转换?
    这是因为,这种数据,一般是后台接口返回给前端的,数据可能是 Number 类型、也可能是字符串类型,所以还是统一先做一次 partInt() 比较保险。这是一种良好的工作习惯

    作者:云牧
    链接:https://juejin.cn/post/7087579243638423588
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    相关文章

      网友评论

        本文标题:sort()介绍

        本文链接:https://www.haomeiwen.com/subject/xqxnertx.html