🚀详解JavaScript系列之数组(五)

356 阅读3分钟

image.png


这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战


前言

接上一篇文章,我们来详细解读js数组的内容,本篇幅讲述“reverse和sort两个api”,上一篇传送门


reverse()

作用:如其名,就是反转数组,返回结果为反转后的数组(是在原数组的基础上反转)。

语法:反转后的数组 = 数组.reverse();

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var result = arr.reverse(); 
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
​
//结果
arr =["f","e","d","c","b","a"]
result =["f","e","d","c","b","a"]

sort()方法

sort我们可能都不陌生,和很多语言里面一样,就是排序的一个api,大家大同小异,只是有些地方不一样,我来讲讲。

sort():对数组的元素进行从小到大来排序(原数组基础上,默认升序)。

无参时(按字典序)

如果在使用 sort() 方法时不带参,则默认按照Unicode 编码,升序排序。

字符串sort
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
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不行么?不,当然不是。回到上面的定义,js的sort是按照Unicode编码,默认按照字典序来排列。那怎么样才能按数字大小排序呢?怎么操作呢?继续往下看。


带参时,自定义排序规则

如果在 sort()方法中带参,那么参数是什么呢?作用是啥?

我们在 sort()传入一个回调函数当做参数,来指定排序规则(就像写C/C++时,经常写的cmp函数来指定排序规则)。回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数。那么如何来决定优先顺序呢?别着急,我们慢慢来说。

我们根据回调函数的返回值来决定元素的排序:

  • 如果返回一个大于 0 的值,则元素会交换位置
  • 如果返回一个小于 0 的值,则元素位置不变
  • 如果返回一个等于 0 的值,则认为两个元素相等,则不交换位置

如果只是看上面的文字,可能不太好理解,我们来看看下面的例子,你肯定就能明白。

数字升序

粗糙版本

var arr = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
var result = arr.sort(function (a, b) {
    if (a > b) {
        // 如果 a 大于 b,则交换 a 和 b 的位置
        return 1;
    } else if (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];

但是我们发现上方代码的写法太啰嗦了,其实也可以简化为如下写法:

简化版:(冒泡排序)

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 改为箭头函数,其写法如下。

ES6版:(箭头函数)

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));
​
//优化
let result = arr.sort((a, b) => a - b);

ES6优化版的箭头函数 是我们在实战开发中用得最多的。

为了确保代码的简洁优雅,接下来的代码中,凡是涉及到函数,我们将尽量采用 ES6 中的箭头函数来写。