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

前端青山2024-12-24 12:21

前言

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

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

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

一、数组的基本操作

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>

二、选择排序算法

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

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

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) 每次交换后输出当前数组状态，便于观察排序过程。

三、冒泡排序算法

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

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

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 中数组的基本操作和两种经典的排序算法------选择排序和冒泡排序。通过具体的代码示例和解析，

相关推荐
向宇it33 分钟前
【从零开始入门unity游戏开发之——C#篇26】C#面向对象动态多态——接口（Interface）、接口里氏替换原则、密封方法（`sealed` ）
java·开发语言·unity·c#·游戏引擎·里氏替换原则
@菜鸟进阶记@36 分钟前
java根据Word模板实现动态填充导出
java·开发语言
卖芒果的潇洒农民38 分钟前
Lecture 6 Isolation & System Call Entry
java·开发语言
SomeB1oody1 小时前
【Rust自学】6.1. 定义枚举
开发语言·后端·rust
SomeB1oody1 小时前
【Rust自学】5.3. struct的方法(Method)
开发语言·后端·rust
dlnu20152506222 小时前
ssr实现方案
前端·javascript·ssr
Kisorge2 小时前
【C语言】指针数组、数组指针、函数指针、指针函数、函数指针数组、回调函数
c语言·开发语言
轻口味3 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王4 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发4 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07构建高效的广告投放系统：应用架构的设计与实现08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10【一文读懂】NTN（非地面网络）技术介绍