美文网首页深究JavaScript程序员JavaScript 进阶营
js里关于Array.prototype.sort分析及日常使用

js里关于Array.prototype.sort分析及日常使用

作者: 恰逢青雪 | 来源:发表于2018-04-03 23:59 被阅读31次

    介绍

    对数组内容进行排序,可传入比较器定义排序规则

    使用

    arr.sort(compare)

    • compare比较器可传可不传
    • 不传将根据内容开头的第一个字符的Unicode指针顺序进行排序
    var fruit = ['cherries', 'apples', 'bananas'];
    fruit.sort();
    // ['apples', 'bananas', 'cherries']
    
    var scores = [1, 10, 21, 2];
    scores.sort();
    // [1, 10, 2, 21]
    // 注意10在2之前,
    // 因为在 Unicode 指针顺序中10的首个字符1在2前面
    
    var things = ['word', 'Word', '1 Word', '2 Words'];
    things.sort(); 
    // ['1 Word', '2 Words', 'Word', 'word']
    // 在Unicode中, 数字在大写字母之前,
    // 大写字母在小写字母之前.
    

    比较器讲解

    我们可通过传入函数(比较器)来自定义sort的排序。
    比较器主要多次对比相邻的2个数来决定他们的先后顺序, 这点与冒泡排序很相似。

    var list = [0,2,4,3,5,7];
    var compare = function(a,b) {
    //该函数将多次被执行直到数组的最后一位
        if(a>b) return -1; //如果负数 那么a位于b前面
        else if(a<b) return 1; //如果正数 那么a位于b后面
        else return 0 //返回0位置不变
    }
    list.sort(compare) //[7, 5, 4, 3, 2, 0]
    
    
    • 没错 很快你会得出结论 他们的顺序是根据 返回的负(a在b前) 或 正(a在b后) 来决定的
    升级版
    var compare = function(a,b) {
        return b-a //总结成了公式
    }
    list.sort(compare)//[7, 5, 4, 3, 2, 0]
    

    日常使用的技巧

    因为比较器的存在 让我们处理起数据结构更加游刃有余

    • 场景1 对返回的data根据他们的名称首字符进行内容升序排序 如果isTop为true则该项置顶
     var list  = [{id:1,isTop:false,name:"ben"},
        {id:2,isTop:false,name:"july"},
        {id:3,isTop:true,name:"summer"},
         {id:4,isTop:false,name:"jaky"}]
    
     var compare = function(a, b) {
        if(a.isTop) return -1;
        if(b.isTop) return 1;    
        var aName = a.name.toLowerCase();
        var bName = b.name.toLowerCase();
        return aName > bName? 1 : aName < bName ? -1 : 0
    }
    list.sort(compare)
    /*[{"id":3,"isTop":true,"name":"summer"},
    {"id":1,"isTop":false,"name":"benc"},
    {"id":4,"isTop":false,"name":"jaky"},
    {"id":2,"isTop":false,"name":"july"}]*/
    
    • 场景2 打乱数组内容所对应索引值
      var list = [1,3,5,7,9];
      var compare = function() {
        return 0.5 - Math.random()
      }
      list.sort(compare) //[5, 3, 9, 7, 1];
    

    相关文章

      网友评论

        本文标题:js里关于Array.prototype.sort分析及日常使用

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