【算法-排序】js插入排序

小孟js

已于 2022-03-04 18:15:18 修改

阅读量389

点赞数 2

分类专栏：算法文章标签： javascript ecmascript 排序算法

于 2022-03-03 11:55:04 首次发布

本文链接：https://blog.csdn.net/qq_39576711/article/details/123250288

版权

算法专栏收录该内容

3 篇文章 1 订阅

订阅专栏

什么是插入排序？
如果我们现在有一个数组arr，从下标为i = 1开始循环，取出key = arr[i],然后让他与前边的元素逐一对比，只要前边的元素比key大，那么就让前边的元素的下标加1，直到找到一个比key小的元素，把key插入到在上一次修改下标的元素的位置，因为我们从前两个元素开始对比，那么在key前边的总是有序的，此时一轮插入结束，进行下一次循环，i++。
看图：

下边就是插入排序的代码，为了看官能够直接执行，我写成了一个html，各位复制到html直接执行就可以，上图也是这个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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .list {
            display: flex;
            margin: 20px;
        }
        .list .item {
            width: 50px;
            height: 30px;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            line-height: 30px;
            border: 2px solid #2992e7;
            border-right: none;
            color: rgb(240, 33, 205);
        }
        .list .item.change_item {
            background-color: rgb(92, 235, 240);
        }
        .list .item.key_item {
            background-color: rgb(221, 230, 140);
        }
        .list .item:nth-last-child(1){
            border-right: 2px solid #2992e7;
        }
    </style>
</head>
<body>
    <script>
        function insertSort(arr){
            for(let i = 1;i < arr.length;i++){
                let key = arr[i]
                let j = i - 1
                while(arr[j] >= 0&&arr[j] > key){
                    arr[j + 1] = arr[j]
                    j--
                }
                arr[j + 1] = key
                renderList(arr,i + 1,j + 1)
            }
            return arr
        }

        let list = [65,6,856,42,2,86,4,9,68,4569]
        renderList(list,1,-1)

        console.log(insertSort(list))

        function renderList(arr,keyIndex,changeIndex){
            let domList = document.createElement("div")
            domList.classList = "list"
            for(let i = 0;i < arr.length;i++){
                let domItem = document.createElement("div")
                domItem.classList = "item"
                if(changeIndex == i){
                    domItem.classList = "item change_item"
                }
                if(keyIndex == i){
                    domItem.classList = "item key_item"
                }
                domItem.innerText = arr[i]
                domList.appendChild(domItem)
            }
            document.body.appendChild(domList)
        }
    </script>
</body>
</html>

觉得有帮助的话，请关注一下，点个赞呗！！！
上一篇：vue用了keep-alive生命周期只执行一次怎么办？
下一篇：js归并排序

小孟js

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【算法-排序】js插入排序

什么是插入排序？如果我们现在有一个数组arr，从下标为i = 1开始循环，取出key = arr[i],然后让他与前边的元素逐一对比，只要前边的元素比key大，那么就让前边的元素的下标加1，直到找到一个比key小的元素，把key插入到在上一次修改下标的元素的位置，一轮插入结束，进行下一次循环，i++。看图：下边就是插入排序的代码，为了看官能够直接执行，我写成了一个html，各位复制到html直接执行就可以，上图也是这个html生成的。<!DOCTYPE html><html l
复制链接

扫一扫