前言
本文将详细介绍 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 中的数组操作和排序算法。
