[18/11]JavaScript基础算法日常笔记以及HTML（更新）

基础决定你可能达到的高度，而业务决定了你的最低瓶颈。

前言

这两天在复习JavaScript的基础算法，拿jQuery写了一下并用HTML写了个可视化界面（就是不想看console了）。

• 冒泡算法
• 插入排序
• 选择排序

冒泡算法（bubbleSort）

新建一个HTML文件，刚开始我先直接拿JavaScript写了基础代码，也就是大家比较熟悉的代码。

function bubbleSort(arr){

    var len = arr.length;
    for(var i=0;i<=len;i++){
        for(var j=0;j<=len-i;j++){
            if(arr[j]>arr[j+1]){
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = arr[j];
            }
        }
    }
    return arr;
}

然后我想着手写arr[]也太蠢了，决定写一个在html上自由输入的。于是我导入了jQuery.min.js，bootstrap.min.js,bootstrap.min.css。由于就在一个HTML文件内实现，不用在后端写了，我把所有的引入都写在head里。然后我把js代码隐藏了，开始写HTML界面。

<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">冒泡算法</span>
    <input type="text" class="form-control" placeholder="请输入一个数" aria-describedby="basic-addon1" style="width: 500px">
    <button type="button" class="btn btn-primary" id="continue">继续</button>
    <button type="button" class="btn btn-primary" id="finish">完成</button>
</div>

写完之后界面是这样子的。
在我的构思中，继续的意思就是对数组的添加，完成则代表着这个数组结束，开始进行冒泡算法。写完HTML界面之后，就是jQuery部分。
在input里输入一个数后，点击继续获得这个数并将其加入数组。

$(function(){
    var arr = new Array();
    $("#continue").click(function(){
        var n = $("input").val();
        arr.push([n]);
        console.log(arr)
    })
});

打开控制台看了一下，确实被加进去了。

之后就是算法的实现。

$("#finish").click(function () {
    var len = arr.length;
    for(var i=0;i<=len;i++){
        for(var j=0;j<=len-i;j++){
            if(arr[j]>arr[j+1]){
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
})

之后为了显示结果，再写个div来放排序后的数组。为了显示清楚，放了个巨幕在下面（闲的）……

<div>
    <div class="jumbotron">
        <div class="container">
            <h3>结果是：</h3>
            <textarea id="result"></textarea>
        </div>
    </div>
</div>

为了显示出来，在完成按钮的jQuery代码最后加上两条。

$("#finish").click(function () {
    var len = arr.length;
    for(var i=0;i<=len;i++){
        for(var j=0;j<=len-i;j++){
            if(arr[j]>arr[j+1]){
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
    $("#result").val(arr); //显示在textarea框里
    arr = []; //为了下一次测试，将数组清空
})

测试一下，输入1-9（乱序）：

点击完成看看结果：

看来没有问题，可以继续写下个代码了。

插入排序（insertSort）

在写冒泡算法时我已经把html界面写完了，这里可以直接复制一遍，然后写jQuery代码就行了。

$("#finish").click(function () {
    for(var i=1;i<arr.length;i++){
        var m = arr[i];
        var j=i-1;
        while(j>=0 && arr[j]>m){
            arr[j+1] = arr[j];
            j--;
        }
        arr[j+1] = m;
    }
    $("#result").val(arr);
    arr = [];
})

关于插入排序的时间复杂度空间复杂度最优最坏情况什么的网上也都有，也很基础，我就不写了。不过插入排序可以优化成折半插入，听起来好像二分查找，用起来其实好像归并排序，递归的思路，我就不写了。

选择排序（selectSort)

写到这里，我深深感受到了复制界面代码的麻烦，思考了一下，开了个新HTML文件，写了个layout.html，之后的就只要模板套进去就行了。在layout里把script部分都去掉，用两行新的代码代替。

{% block main %}
{% endblock %}

之后算法都新建.html文件写就行了，只要在新文件加三行代码。

{% extends "layout.html" %} //导入layout

{% block main %} 
//代码在这里写
{% endblock %}

以下是代码。

$("#finish").click(function (){
    var len = arr.length;
    for(var i=0;i<len;i++){
        var min = arr[i];
        var temp = i;
        for(var j=i+1;j<len;j++){
            if(arr[j]<min){
                min = arr[j];
                temp = j;
            }
        }
        arr[temp] = arr[i];
        arr[i] = min;
    }
    $("#result").val(arr);
    arr = [];
})

（哎，为了偷懒导入模板结果更麻烦了，又安装了express和swig，还是改写js文件导入比较方便啊）
选择排序也就是把整个数组捋一遍，然后依次找出最小的第二小的……分别放到第一位第二位直到最后一位即可。也就是冒泡排序的翻版嘛。（虽然所有排序基本都跟冒泡有关）

还有几个排序算法就慢慢边写边更新好了。主要的模板也都写完了，剩下的算法网上也都有，就慢慢更新吧。