JavaScript中数组的两种排序方法详解（冒泡排序和选择排序）

最新推荐文章于 2023-09-01 10:29:42 发布

敲烂键盘的大侠

最新推荐文章于 2023-09-01 10:29:42 发布

阅读量435

点赞数

分类专栏：前端 JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43998496/article/details/105005125

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

一、冒泡排序的原理（从小到大）

相邻两个数进行比较，如果前一个数大于后一个数，那么就交换，否则不交换

原理剖析

比如有一组含有6个数字的数：5、3、7、2、1、6
一共6个数字，做5次循环，每次循环相邻两个数都会进行一次比较。
第一次循环：把最大的7放在了最后
在这里插入图片描述
第二次循环：7已经放在了最下面，不用再比较了。上面的重新排序把最大的6最后也就是放在了7的上面

第三次循环：6、7已经放在最下面，不用再次比较。上面的重新排序把5放在了最后，也就是6、7的上面
在这里插入图片描述
第四次循环：5、6、7已经放在最下面，不用再次比较。上面的重新排序把3放在了最后面，也就是5、6、7的上面

第五次循环：3、5、6、7已经放在最下面，不用再次比较。上面的重新排序把2放在了最后面，也就是3、5、6、7的上面，1是最小的，放在2的前面，循环结束。
在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组常用的方法</title>
</head>
<body>
    <input type="button" value="测试" onclick="fn()" />    
</body>
</html>
<script>
function fn(){
    var arr=[5,3,7,2,1,6];

    // 需要5轮，分别拿出剩下的数中的最大的，最后一个数，就不用管了。
    for(var i=0;i<arr.length-1;i++){
        // console.log("i",i);
        for(var j=0;j<arr.length-1-i;j++){
            // console.log("j",j);
            if(arr[j]>arr[j+1]){
                // 交换
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
    console.log(arr);//[ 1, 2, 3, 5, 6, 7 ]
}

fn();
</script>

二、选择排序的原理（从小到大）

要排序的数组	5,3,7,1,2,8
选择法排序的原理剖析：每次循环选择最小的数进行交换
1、从第一个数到最后一个数里找出最小数，把最小数和第一个数进行交换	1,3,7,5,2,8
2、从第二个数到最后一个数里找出最小数，把最小数和第二个数进行交换	1,2,7,5,3,8
3、从第三个数到最后一个数里找出最小数，把最小数和第三个数进行交换	1,2,3,5,7,8
4、从第四个数到最后一个数里找出最小数，把最小数和第四个数进行交换	1,2,3,5,7,8
5、从第五个数到最后一个数里找出最小数，把最小数和第五个数进行交换	1,2,3,5,7,8

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组常用的方法</title>
</head>
<body>
    <input type="button" value="测试" onclick="fn()" />    
</body>
</html>
<script>
function fn(){
    var arr=[5,3,7,1,2,8];

    // 一共找出五个最小的数，最后一个不用管了，所以，六个数，循环5次。
    for(var i=0;i<arr.length-1;i++){   
        // i=0   
        //1、找最小数
        var min = arr[i];
        var index = i;//index是最小数的下标
        // 循环到底
        for(var j=i+1;j<arr.length;j++){
            if(arr[j]<min){
                min = arr[j];
                index = j;
            }
        }
        //2、交换(数组中的最小数和arr[i])
        var t = arr[i];
        arr[i] = arr[index];
        arr[index] = t;
    }
    console.log(arr);
}

fn();

</script>