【JavaScript】内置对象 - 数组对象 ③ ( 数组反转 - reverse 方法 | 数组排序 - sort 方法 | 自定义数组排序规则 )

韩曙亮

发布于 2024-05-14 08:46:20

1210

发布于 2024-05-14 08:46:20

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、数组排序
- 1、翻转数组元素 - reverse()
- 2、数组元素排序 - sort() 默认从小到大排序
- 3、数组元素排序 - sort() 自定义排序规则
- 4、数组元素排序 - sort() 自定义降序排序简化写法

Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

一、数组排序

1、翻转数组元素 - reverse()

调用 Array 数组对象的 reverse() 方法可以翻转数组中的元素顺序 , 语法如下 :

reverse()

该方法没有参数 ;
返回值就是原始数组 , 该数组中的元素顺序被翻转了 ;

调用该方法 , 原数组的数据会被改变 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

代码示例 :

        // 创建数组对象
        let arr = [1, 2, 3];

        // 翻转数组
        arr.reverse();

        // 输出 : (3) [3, 2, 1]
        console.log(arr);

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建数组对象
        let arr = [1, 2, 3];

        // 翻转数组
        arr.reverse();

        // 输出 : (3) [3, 2, 1]
        console.log(arr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

2、数组元素排序 - sort() 默认从小到大排序

调用 Array 数组对象的 sort() 方法可以将数组中的元素进行排序 , 语法如下 :

sort()
sort(compareFn)

该方法不传入参数默认是将元素从小到大进行排列 ;
该方法可传入一个定义排序顺序的函数 , compareFn 参数是一个函数 , 该函数需要满足如下要求 :
- compareFn 比较函数的参数是两个用于比较的元素 , a 是第一个元素 , b 是第二个元素 ;
- compareFn 比较函数返回值是一个数字 , a < b 返回负数 , a > b 返回正数 , a = b 返回 0 ;
返回值就是原始数组 , 该数组中的元素顺序被重新排序了 ;

调用该方法 , 原数组的数据会被改变 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

代码示例 :

        // 创建数组对象
        let arr = [9, 5, 2, 7];

        // 数组排序
        arr.sort();

        // 输出 : (4) [2, 5, 7, 9]
        console.log(arr);

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建数组对象
        let arr = [9, 5, 2, 7];

        // 数组排序
        arr.sort();

        // 输出 : (4) [2, 5, 7, 9]
        console.log(arr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

3、数组元素排序 - sort() 自定义排序规则

使用 sort(compareFn) 语法 , 传入一个排序规则函数 ;

compareFn 比较函数的参数是两个用于比较的元素 , a 是第一个元素 , b 是第二个元素 ;
compareFn 比较函数返回值是一个数字 , a < b 返回负数 , a > b 返回正数 , a = b 返回 0 ;

排序函数示例 : 默认的从小到大的排序规则是 :

a < b , 返回 -1 ;
a > b , 返回 1 ;
a == b , 返回 0 ;

        // 标准排序规则 : 从小到大排序
        //  a < b 返回 -1 
        //  a > b 返回 1
        //  a == b 返回 0 
        function compareFn(a, b) {
            if (a > b) {
                return -1;
            }
            if (a < b) {
                return 1;
            }
            // a == b
            return 0;
        }

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

代码示例 :

        // 创建数组对象
        let arr = [9, 5, 2, 7];

        // 标准排序规则 : 从小到大排序
        //  a < b 返回 -1 
        //  a > b 返回 1
        //  a == b 返回 0 
        function compareFn(a, b) {
            if (a > b) {
                return -1;
            }
            if (a < b) {
                return 1;
            }
            // a == b
            return 0;
        }

        // 数组排序
        arr.sort(compareFn);

        // 输出 : (4) [9, 7, 5, 2]
        console.log(arr);

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建数组对象
        let arr = [9, 5, 2, 7];

        // 标准排序规则 : 从小到大排序
        //  a < b 返回 -1 
        //  a > b 返回 1
        //  a == b 返回 0 
        function compareFn(a, b) {
            if (a > b) {
                return -1;
            }
            if (a < b) {
                return 1;
            }
            // a == b
            return 0;
        }

        // 数组排序
        arr.sort(compareFn);

        // 输出 : (4) [9, 7, 5, 2]
        console.log(arr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

4、数组元素排序 - sort() 自定义降序排序简化写法

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建数组对象
        let arr = [9, 5, 2, 7];

        // 简化写法 : 返回 b - a 即可
        function compareFn(a, b) {
            return b - a;
        }

        // 数组排序
        arr.sort(compareFn);

        // 输出 : (4) [9, 7, 5, 2]
        console.log(arr);
    </script>
</head>

<body>
</body>

</html>

执行结果 :