js 数组成员排序 sort() reverse() - Kaiqisan

js 数组成员排序 sort() reverse()

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天还是继续之前的话题，讲讲数组有关的知识，今天的内容还是和迭代有关,是一种比较特殊的迭代，因为它涉及到了 数组成员的排序，直接对原数组进行改变。

sort(func) : 完成对数组成员的排序，括号里的参数为可选项，为排序规则，如果啥也不填，就会按照默认的规则排序，即按照字符串的编码排序，在排序时，首先比较每个元素的第 1 个字符，在第 1 个字符相同的情况下，再比较第 2 个字符，以此类推。这个方法没有返回值，会影响原数组的排列

let arr = ['b', 'd', 'e', 'f', 'aa', 'ac']
arr.sort()
console.log(arr) // ["aa", "ac", "b", "d", "e", "f"]

说完了默认的排序顺序，然后我们来看看这个func参数该怎么写才好呢。

下面为一个例子

let arr = [1, 12, 45, 78, 11, 105, 7, 15]
arr.sort((a, b) => {
    return a - b
})
console.log(arr) // [1, 7, 11, 12, 15, 45, 78, 105]

其实这个排序的本质就是冒泡排序法，a - b 就是判断是否需要交换的一个重要判断，如果 a - b 小于 0 就不交换，a - b 大于0就交换，没错，只看返回的结果是大于0还是小于0，其他返回一律不作处理。把上述的代码写成冒泡排序的话是这样的。这里其实有现成的方法了只要记住 a - b(前面的形参减去后面的形参)是升序排序，b - a（后面的形参减去前面的形参）是降序排序

let arr = [1, 12, 45, 78, 11, 105, 7, 15]
for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] - arr[j + 1] > 0) { // 交换条件
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]] // 执行交换操作
        }
    }
}
console.log(arr)

当然，这个方法不仅仅可以用来排序数字大小，也可以根据对象内部的属性进行排序。

let arr = [{name: 'kaiqisan', uid: 10001}, {name: 'tom', uid: 10004}, 
           {name: 'kim', uid: 10003}, {name: 'yorm', uid: 10006}, 
           {name: 'john', uid: 10007}, {name: 'kaiqisan', uid: 10009}, 
           {name: 'kaiqisan', uid: 10002}]
arr.sort((a, b) => {
    return a.uid - b.uid
})
console.log(arr)
// 
// {name: "kaiqisan", uid: 10001}
// {name: "kaiqisan", uid: 10002}
// {name: "kim", uid: 10003}
// {name: "tom", uid: 10004}
// {name: "yorm", uid: 10006}
// {name: "john", uid: 10007}
// {name: "kaiqisan", uid: 10009}

也可以拿来分堆

// 举一个最简单的例子，就是把正数与负数分堆，正数分堆后排数组前面，负数分堆后排后面。
let arr = [1, -12, 45, -78, 11, -105, 7, 15]
arr.sort((a, b) => {
    if (a <= 0 && b >= 0) {
        return 1
    } else {
        return -1
    }
})
console.log(arr) // [15, 7, 11, 45, 1, -105, -78, -12]

还可以给日期排序

let arr = [{time: '2020-08-14 13:23:15'}, {time: '2020-08-14 13:23:21'},
           {time: '2020-08-13 17:14:45'}, {time: '2020-08-13 03:45:00'}, 
           {time: '2020-08-05 20:15:14'}]
arr.sort((a, b) => {
    return Date.parse(a.time) - Date.parse(b.time)
})
console.log(arr);
// {time: "2020-08-05 20:15:14"}
// {time: "2020-08-13 03:45:00"}
// {time: "2020-08-13 17:14:45"}
// {time: "2020-08-14 13:23:15"}
// {time: "2020-08-14 13:23:21"}

其他更多的用途可以自行想象布置，但它会自动迭代，绝对比写for循环要来得方便。

PS：绝对不要出现数组成员数据类型不一的情况，否则无法判断，结果一律为NaN(除了null - number 和number - null 结果分别为 -number number)，默认当做不替换，跳过当前迭代。

reverse()用法很简单，套一下这个方法就可以让你的数组成员排序顺序颠倒一下。这个方法没有返回值，会影响原数组的排列

let arr = [1, 2, 3, 4, 5, 10]
arr.reverse()
console.log(arr) // [10, 5, 4, 3, 2, 1]

总结

这俩方法是相当的方便，在页面渲染涉及到数组数据的渲染的时候（表格，评论等等的），我们就可能需要根据某些规则排序，然后再次重新渲染，这俩方法在排序这方面绝对是第一合适。