让前端飞Web前端之路

数组排序之优雅的compare函数

2017-12-13  本文已影响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函数很重要,是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')) // 试试结果咯
上一篇 下一篇

猜你喜欢

热点阅读