JavaScript：数组排序（冒泡排序）

一、数组排序

二、sort()方法

1、基本语法

2、默认排序

3、自定义排序

三、冒泡排序

1、基本概念

2、实现步骤

3、过程解析

4、代码示例

5、时间复杂度

一、数组排序

对一个给定数组进行处理，使其从无序变为有序，这个过程就是数组排序；

在JavaScript中可以通过多种方式实现数组排序；

比如，Array对象的sort()方法，冒泡排序等等；

二、sort()方法

在JavaScript中，sort()方法是数组对象的一个内置方法，用于对数组元素进行排序；

它可以对数组的元素进行就地排序，在原数组上进行修改排序；
返回排序后的数组，是对原数组的引用，不生成新的数组；
排序顺序可以是字母或数字，可以按照升序或者降序排序；

1、基本语法

array.sort([compareFunction]);

array，必须，要排序的数组；
compareFunction，可选，比较函数；默认将数组元素转换为字符串并按照字典顺序进行排序；

2、默认排序

不提供compareFunction 比较函数时，即采用默认排序；

当数组元素为数值型、字符串型等，会按照升序（默认）方式对该数组进行排序；

（1）数组元素为数值型

<script>// 1、默认排序// 1.1 数组元素为数值型let arrInt = [1,2,6,4,7,6,9,3,2,2,5,6]let newArrInt = arrInt.sort();console.log("原数组", arrInt);console.log("排序后的数组", newArrInt);console.log("原数组是否改变", arrInt !== newArrInt);
</script>

（2）数组元素为字符串型

<script>// 1、默认排序// 1.2 数组元素为字符串型let arrStr = ['q','qq','qqq','aaa','aa','a'];let newArrStr = arrStr.sort();console.log("原数组", arrStr);console.log("排序后的数组", newArrStr);console.log("原数组是否改变", arrStr !== newArrStr);
</script>

3、自定义排序

通过提供 compareFunction 比较函数，可以实现自定义排序，指定排序顺序；

比较函数：（ a , b ）=> { return a - b }；

（1）数组元素为数值型

按照数字大小进行排序；

// 2、自定义排序// 2.1 数组元素为数值型
let arrInt = [1, 2, 6, 4, 7, 6, 9, 3, 2, 2, 5, 6]
// let newArrInt1 = arrInt.sort((a,b)=>{ return a - b});
// console.log("数字大小升序:", newArrInt1);
let newArrInt2 = arrInt.sort((a, b) => { return b - a });
console.log("数字大小降序:", newArrInt2);

（2）数组元素为字符串型

按照字符串长度进行排序；

// 2、自定义排序// 2.2 数组元素为字符串型
let arrStr = ['Apple', 'Strawberry','Orange','Grape', 'Cherry', 'Banana', 'Watermelon', 'Durian'];
// let newArrStr1 = arrStr.sort((a, b) => { return a.length - b.length });
// console.log("字符串长度升序:", newArrStr1);
let newArrStr2 = arrStr.sort((a, b) => { return b.length - a.length });
console.log("字符串长度降序:", newArrStr2);

（3）数组元素为对象

按照年龄大小排序；

// 2、自定义排序// 2.3 数组元素为对象
let arrObj = [{ name: "ZZ", age: 18 },{ name: "EE", age: 16 },{ name: "LL", age: 19 },{ name: "UU", age: 22 },{ name: "MM", age: 15 }
];
// let newArrObj1 = arrObj.sort((a, b) => { return a.age - b.age });
// console.log("年龄升序:", newArrObj1);
let newArrObj2 = arrObj.sort((a, b) => { return b.age - a.age });
console.log("年龄降序:", newArrObj2);

三、冒泡排序

1、基本概念

冒泡排序，是一种简单的排序算法，它通过重复遍历待排序的数列，比较相邻元素并交换它们的位置，直到整个数列有序；

这个过程就像气泡一样，让较大的元素逐渐“浮”到数组的顶端；

2、实现步骤

从头到尾遍历整个数列，比较相邻的元素；
如果前一个元素大于后一个元素，则交换它们的位置；
对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对；
比较交换结束后，被比较的元素中最后一个就是相对最大的数；
对整个数组元素重复上述过程（除了最后一个），每次需要交换的元素越来越少，直到没有需要交换的元素为止；

3、过程解析

以下的分析过程，均以该数组为例：arr = [4, 7, 2, 8, 8, 2, 4, 3, 4]，共计9个元素进行升序排序；

（1）第一次排序

找出数组元素arr[0] ~ arr[8]中的最大元素，将最大的元素放置在 arr[8] 的位置；

第一步，比较arr[0] 和arr[1]；如果arr[0] 大于 arr[1]，则交换两个位置的元素（较大的元素后置）；
第二步，比较arr[1] 和arr[2]；如果arr[1] 大于 arr[2]，则交换两个位置的元素；
......
第八步，比较arr[7] 和arr[8]；如果arr[7] 大于 arr[8]，则交换两个位置的元素；

结束后，数组arr[0] ~ arr[8]中最大的元素已经处在 arr[8] 的位置，此后，不再参与比较；

（2）第二次排序

找出数组元素arr[0] ~ arr[7]中的最大元素，将最大的元素放置在 arr[7] 的位置；

第一步，比较arr[0] 和arr[1]；如果arr[0] 大于 arr[1]，则交换两个位置的元素；
第二步，比较arr[1] 和arr[2]；如果arr[1] 大于 arr[2]，则交换两个位置的元素；
......
第七步，比较arr[6] 和arr[7]；如果arr[6] 大于 arr[7]，则交换两个位置的元素；

结束后，数组arr[0] ~ arr[7]中最大的元素已经处在 arr[7] 的位置，此后，不再参与比较；

（3）重复排序

根据第一次排序和第二次排序，重复这样的排序步骤，直到将arr[0]与arr[1]做完比较排序，使得所有的元素有序；

（4）排序规律

每一次排序都是在找，被比较的所有元素中最大的元素，并将其放置在这些元素的最后；
数组中共有n个元素（长度为n），则排序的次数总计为n-1；
第 i 次比较完成，就会有 i 个元素相对有序，参与下次比较的元素就只有 n-i 个；

4、代码示例

函数定义：bubbleSort() 函数接收一个数组 arr 作为参数；
参数校验：在排序之前，对传入的参数 arr 进行校验；
外层循环：控制排序的轮数，总共需要 n - 1 轮（ n 是数组长度）；
内层循环：进行相邻元素的比较和交换，随着外层循环的进行，已经排好序的元素会逐渐“浮”到数组的末尾，因此内层循环的范围逐渐减小；
元素交换：如果当前元素大于下一个元素，则交换它们的位置；
返回结果：排序完成后返回排序后的数组；

<script>// 传入正常数组console.log(bubbleSort([4, 7, 2, 8, 8, 2, 4, 3, 4]));// 传入空数组console.log(bubbleSort([]));// 传入非数组console.log(bubbleSort('arr'));// 冒泡排序function bubbleSort(arr) {// 判断传入的参数是否为数组if (Object.prototype.toString.call(arr) !== "[object Array]") return '不是数组';// 长度为0 或 1 的数组直接返回,不需要排序if (arr.length < 2) return arr;// 外层循环 控制比较的轮数for (let i = 0; i < arr.length-1; i++) {// 内层循环 控制相邻两个元素的比较和交换,for (let j = 0; j < arr.length - 1 - i; j++) {// 前一个元素大于后一个, 则交换这两个元素if (arr[j] > arr[j+1]) {let temp = arr[j+1];arr[j+1] = arr[j];arr[j] = temp}}}return arr;}
</script>