本文将详细介绍 JavaScript 中的数组操作以及选择排序和冒泡排序这两种经典的排序算法。
我们将从以下几个方面展开讨论:
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>
-
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>
-
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>
-
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>
-
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>
-
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>
-
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>
-
复制数组可以通过多种方式实现,以下是三种常见的方式:
- <!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>
-
选择排序是一种简单直观的排序算法。它的基本思想是每次从未排序的部分中找到最小(或最大)的元素,将其放到已排序部分的末尾。具体步骤如下:
- <!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>
-
冒泡排序也是一种简单的排序算法。它的基本思想是通过相邻元素的两两比较,将较大的元素逐步“冒泡”到数组的末尾。具体步骤如下:
- <!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>
-
通过对数组的基本操作和排序算法的学习,我们可以更好地理解和掌握 JavaScript 中数组的使用方法。选择排序和冒泡排序虽然简单,但在某些场景下仍然具有一定的应用价值。例如,在处理小规模数据时,它们可以提供直观且易于理解的解决方案。
然而,在实际开发中,更高效的排序算法(如快速排序、归并排序等)通常更为常用。因此,学习这些基础算法不仅有助于提高编程技能,还能为深入理解更复杂的算法打下坚实的基础。
希望本文的内容能够帮助你更好地理解和应用 JavaScript 中的数组操作和排序算法。如果你有任何问题或建议,欢迎随时交流!
本文详细介绍了 JavaScript 中数组的基本操作和两种经典的排序算法——选择排序和冒泡排序。通过具体的代码示例和解析。