您当前的位置：首页 > 计算机 > 编程开发 > JavaScript

JavaScript 数组操作与排序算法详解

时间：02-12来源：作者：点击数：17

前言

本文将详细介绍 JavaScript 中的数组操作以及选择排序和冒泡排序这两种经典的排序算法。

我们将从以下几个方面展开讨论：

数组的基本操作：包括增删改查等常用操作。
选择排序算法：通过代码实现和解析，理解其工作原理。
冒泡排序算法：同样通过代码实现和解析，了解其特点。
总结与应用：结合实际应用场景，探讨这些技术的实际价值。

一、数组的基本操作

1.1 增加元素

1.1.1 `unshift` 方法

unshift 方法用于在数组的开头添加一个或多个元素，并返回新的数组长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [5, 6, 7, 8, 9];
        console.log(arr.unshift(true, [1, 2], false)); // 输出: 8
        console.log(arr); // 输出: [true, [1, 2], false, 5, 6, 7, 8, 9]
    </script>
</body>
</html>

1.1.2 `push` 方法

push 方法用于在数组的末尾添加一个或多个元素，并返回新的数组长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [5, 6, 7, 8, 9];
        console.log(arr.push(true, [1, 2], false)); // 输出: 8
        console.log(arr); // 输出: [5, 6, 7, 8, 9, true, [1, 2], false]
    </script>
</body>
</html>

1.2 删除元素

1.2.1 `shift` 方法

shift 方法用于移除数组的第一个元素，并返回该元素。如果数组为空，则返回 undefined。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [5, 6, 7, 8, 9];
        console.log(arr.shift()); // 输出: 5
        console.log(arr); // 输出: [6, 7, 8, 9]
    </script>
</body>
</html>

1.2.2 `pop` 方法

pop 方法用于移除数组的最后一个元素，并返回该元素。如果数组为空，则返回 undefined。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [5, 6, 7, 8, 9];
        console.log(arr.pop()); // 输出: 9
        console.log(arr); // 输出: [5, 6, 7, 8]
    </script>
</body>
</html>

1.3 修改元素

splice 方法用于添加或删除数组中的元素。它有三个参数：起始索引、删除的元素个数（可选）、要添加的新元素（可选）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [5, 6, 7, 8, 9];

        // 删除所有元素
        console.log(arr.splice(1)); // 输出: [6, 7, 8, 9]
        console.log(arr); // 输出: [5]

        // 删除两个元素
        console.log(arr.splice(1, 2)); // 输出: [6, 7]
        console.log(arr); // 输出: [5, 8, 9]

        // 添加新元素
        console.log(arr.splice(1, 2, true, false)); // 输出: [6, 7]
        console.log(arr); // 输出: [5, true, false, 8, 9]

        // 插入新元素
        console.log(arr.splice(1, 0, true, false)); // 输出: []
        console.log(arr); // 输出: [5, true, false, 6, 7, 8, 9]
    </script>
</body>
</html>

1.4 截取子数组

slice 方法用于提取数组的一部分并返回一个新的数组，不会修改原数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [5, 6, 7, 8, 9];

        console.log(arr.slice(1)); // 输出: [6, 7, 8, 9]
        console.log(arr.slice(1, 4)); // 输出: [6, 7, 8]
        console.log(arr.slice(0, -1)); // 输出: [5, 6, 7, 8]
        console.log(arr); // 输出: [5, 6, 7, 8, 9]
    </script>
</body>
</html>

1.5 拼接数组

concat 方法用于合并两个或多个数组，并返回一个新数组，不会修改原数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [5, 6, 7, 8, 9];
        console.log(arr.concat(true, [1, [2, 3]], false));
        // 输出: [5, 6, 7, 8, 9, true, 1, [2, 3], false]
        console.log(arr); // 输出: [5, 6, 7, 8, 9]
    </script>
</body>
</html>

1.6 复制数组

复制数组可以通过多种方式实现，以下是三种常见的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [5, 6, 7, 8, 9];

        // 方法一：使用 slice
        function fnCopyArr(arr) {
            return arr.slice(0);
        }

        // 方法二：使用 concat
        function fnCopyArray(arr) {
            return arr.concat();
        }

        // 方法三：手动遍历
        function fnCloneArr(arr) {
            var list = [];
            for (var i = 0, len = arr.length; i < len; i++) {
                list[i] = arr[i];
            }
            return list;
        }

        console.log(fnCopyArr(arr)); // 输出: [5, 6, 7, 8, 9]
        console.log(fnCloneArr(arr)); // 输出: [5, 6, 7, 8, 9]
        console.log(fnCopyArray(arr)); // 输出: [5, 6, 7, 8, 9]
    </script>
</body>
</html>

二、选择排序算法

选择排序是一种简单直观的排序算法。它的基本思想是每次从未排序的部分中找到最小（或最大）的元素，将其放到已排序部分的末尾。具体步骤如下：

从未排序部分中找到最小的元素。
将该元素与未排序部分的第一个元素交换位置。
重复上述过程，直到所有元素都已排序。

2.1 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        选择排序：依次取一个元素，与剩下所有的元素进行比较，符合条件，交换位置.
        9  6   15   4   2
        2  9   15   6   4
        2  4   15   9   6
        2  4   6    15  9
        2  4   6    9   15
        */
        function fnSelectSortFromSmallToBig(arr) {
            // 依次取一个元素
            for (var i = 0; i < arr.length - 1; i++) {
                // 剩下所有的元素
                for (var j = i + 1; j < arr.length; j++) {
                    // 比较
                    if (arr[i] > arr[j]) {
                        // 交换位置 
                        var t = arr[i];
                        arr[i] = arr[j];
                        arr[j] = t;
                    }
                }
                console.log(arr);
            }
            return arr;
        }

        // 声明一个数组
        var arr = [9, 6, 15, 4, 2];
        fnSelectSortFromSmallToBig(arr);
        console.log(arr);
    </script>
</body>
</html>

2.2 代码解析

外层循环：for (var i = 0; i < arr.length - 1; i++) 遍历数组的每个元素。
内层循环：for (var j = i + 1; j < arr.length; j++) 遍历剩余的元素，寻找最小值。
比较与交换：if (arr[i] > arr[j]) 如果当前元素大于后续元素，则交换它们的位置。
输出中间结果：console.log(arr) 每次交换后输出当前数组状态，便于观察排序过程。

三、冒泡排序算法

冒泡排序也是一种简单的排序算法。它的基本思想是通过相邻元素的两两比较，将较大的元素逐步“冒泡”到数组的末尾。具体步骤如下：

比较相邻的元素，如果前一个比后一个大，则交换它们的位置。
对每一对相邻元素做同样的工作，从数组的开始部分到结束部分。
重复上述过程，直到没有需要交换的元素为止。

3.1 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        冒泡排序：（相邻）的两个数，进行比较，符合条件，交换位置
        9    6    6   4   2
        6    9    4   2   4
        15   4    2   6
        4    2    9
        2    15
        */
        // 封装一个冒泡排序的函数
        function fnBubbleSortFromSmallToBig(arr) {
            // 比较轮数
            for (var j = 1; j < arr.length; j++) {
                // 遍历数组，取出元素
                for (var i = 0; i < arr.length - j; i++) {
                    // 进行比较
                    if (arr[i] > arr[i + 1]) {
                        // 交换位置
                        var t = arr[i];
                        arr[i] = arr[i + 1];
                        arr[i + 1] = t;
                    }
                }
            }
            return arr;
        }

        // 声明一个数组
        var arr = [9, 6, 15, 4, 2];
        fnBubbleSortFromSmallToBig(arr);
        console.log(arr);
    </script>
</body>
</html>

3.2 代码解析

外层循环：for (var j = 1; j < arr.length; j++) 控制比较的轮数。
内层循环：for (var i = 0; i < arr.length - j; i++) 遍历数组，进行相邻元素的比较。
比较与交换：if (arr[i] > arr[i + 1]) 如果前一个元素大于后一个元素，则交换它们的位置。
返回结果：return arr 返回排序后的数组。

四、总结与应用

通过对数组的基本操作和排序算法的学习，我们可以更好地理解和掌握 JavaScript 中数组的使用方法。选择排序和冒泡排序虽然简单，但在某些场景下仍然具有一定的应用价值。例如，在处理小规模数据时，它们可以提供直观且易于理解的解决方案。

然而，在实际开发中，更高效的排序算法（如快速排序、归并排序等）通常更为常用。因此，学习这些基础算法不仅有助于提高编程技能，还能为深入理解更复杂的算法打下坚实的基础。

希望本文的内容能够帮助你更好地理解和应用 JavaScript 中的数组操作和排序算法。如果你有任何问题或建议，欢迎随时交流！

结尾

本文详细介绍了 JavaScript 中数组的基本操作和两种经典的排序算法——选择排序和冒泡排序。通过具体的代码示例和解析。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:JavaScript 逆向，常用的 11 个 Hook 技巧！下一篇:从入门到精通：Vue3一篇文章搞定！

记录在本地电脑部署自	围棋入门教程十天即
围棋下法	Grid-A-Licious 基于

首页

学习

工作

生活

兴趣组

电子

计算机

掌上机件

图库

游戏

考试与竞赛

黑板报

国学

外语

下载

故事汇

社区

课程

JavaScript 数组操作与排序算法详解

前言

一、数组的基本操作

1.1 增加元素

1.1.1 `unshift` 方法

1.1.2 `push` 方法

1.2 删除元素

1.2.1 `shift` 方法

1.2.2 `pop` 方法

1.3 修改元素

1.4 截取子数组

1.5 拼接数组

1.6 复制数组

二、选择排序算法

2.1 代码实现

2.2 代码解析

三、冒泡排序算法

3.1 代码实现

3.2 代码解析

四、总结与应用

结尾

JavaScript 数组操作与排序算法详解

前言

一、数组的基本操作

1.1 增加元素

1.1.1 unshift 方法

1.1.2 push 方法

1.2 删除元素

1.2.1 shift 方法

1.2.2 pop 方法

1.3 修改元素

1.4 截取子数组

1.5 拼接数组

1.6 复制数组

二、选择排序算法

2.1 代码实现

2.2 代码解析

三、冒泡排序算法

3.1 代码实现

3.2 代码解析

四、总结与应用

结尾

1.1.1 `unshift` 方法

1.1.2 `push` 方法

1.2.1 `shift` 方法

1.2.2 `pop` 方法