美文网首页让前端飞Web前端之路
数组排序之优雅的compare函数

数组排序之优雅的compare函数

作者: 歇歇 | 来源:发表于2017-12-13 14:53 被阅读107次

    JavaScript数组排序,默认支持两种:sort()排序和reverse()逆序。

    reverse()

    reverse()没什么好介绍的,就是把数组反转一下。

    var arr = [2, 1, 3, 7, 12, 17]
    arr.reverse() // [17, 12, 7, 3, 1, 2]
    
    // 类似于
    var arr = [2, 1, 3, 7, 12, 17]
    var tmp = []
    var len = arr.length
    for (var i=0; i<len; i++) {
        tmp.push(arr.pop())
    }
    arr = tmp
    

    sort() & 优雅的写compare函数

    sort()有两个重点:

    • 排序方法比较的是字符串
    • 排序方法可以自定义compare函数

    compare函数很重要,是sort()的精髓,因为它sort()才变得好用。它可以实现:降序排序、数字排序、数组元素为对象且以对象某字段排序...

    // 比较的是字符串 --1--
    var arr = [2, 1, 3, 7, 12, 17]
    arr.sort() //[1, 12, 17, 2, 3, 7]
    
    // 自定义compare函数
    // 比较数字 - 以数据大小定顺序 --2--
    var arr = [2, 1, 3, 7, 12, 17]
    var compare = function(item1, item2) {
        if(Number(item1) < Number(item2)) { 
            return -1 // 升序排序-1,降序排序1
        } else if (Number(item1) > Number(item2)) {
            return 1 // 升序排序1,降序排序-1
        } else {
            return 0 // 相等返回0
        }
    }
    arr.sort(compare) //[1, 2, 3, 7, 12, 17]
    
    // 数组元素为对象(sort()将无法排序),并以对象的某个属性排序 --3--
    var arr = [
        {
            name: 'luwuer',
            age: '18'
        },
        {
            name: 'cc',
            age: '23'
        },
        {
            name: 'bili',
            age: '8'
        }
    ]
    var compareContainer = function(attr) {
        // return的匿名函数才是compare函数喲
        return function(item1, item2) {
            var value1 = isNaN(Number(item1[attr]))? item1[attr]: Number(item1[attr])
            var value2 = isNaN(Number(item2[attr]))? item2[attr]: Number(item2[attr])
            if (value1 < value2) {
                return -1
            } else if (value1 > value2) {
                return 1
            } else {
                return 0
            }
        }
    }
    arr.sort(compareContainer('age')) // 试试结果咯
    

    相关文章

      网友评论

        本文标题:数组排序之优雅的compare函数

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