在計算機中儲存的資料執行的兩種最常見操作是排序和檢索。

本次介紹的是氣泡排序，插入排序，選擇排序三種基本排序演算法。其中外迴圈會遍歷陣列每一項，內迴圈則用於比較元素。其中原理參考逝者如斯,不捨晝夜的部落格園。

網頁展示

程式碼部分

1.陣列測試平臺

//CArray.js
function CArray(numElements){
    this.dataStore = [];
    this.numElements = numElements;//返回陣列個數
    this.setData = setData;//生成一組隨機資料
    this.toString = toString;//顯示該組資料
 

    this.clear = clear;//清空該組資料
    for(var i=0; i<numElements; i++){
        this.dataStore[i]=i;
    }
}
function setData(){
    for(var i=0; i<this.numElements; i++){
        this.dataStore[i] = Math.floor(Math.random()*(this.numElements+1));
    }
}
function clear(){
    for(var i=0; i<this
 
.numElements; i++)
    {
        this.dataStore[i] = 0;
    }
}
function toString(){
    var str = "";
    for(var i=0; i<this.numElements; i++)
    {
        str += this.dataStore[i] + " ";
        //每10個數據一排（除了第一排）
        var j = i+1;
        if(j%10 ==0)
        {
            str += "\n";
        }
    }
    return
 
 str;
}
//交換陣列中兩個值，注意不屬於CArray方法
function swap(arr, index1, index2){
    var temp = arr[index1];
    arr[index1] = arr[index2];
    arr[index2] = temp;
}
var newData;//儲存該組資料的全域性變數，傳遞該組資料用於下方的排序方法

//在網頁上展示該組資料
function origData(){
    var numData = parseInt(document.getElementById("num_data").value,10);
    newData = new CArray(numData);
    newData.setData();
    var result = document.getElementById("original_data");
    result.innerHTML = newData.toString();
}

2.氣泡排序

//sort.js
function bubbleSort(){
    var tempCArray = newData;
    var nums = tempCArray.numElements;
    var start = new Date().getTime();//記錄排序時間

    for(var outer = nums; outer >= 2; outer--)
    {
        for(var inner = 0; inner < outer - 1; inner++)
        {
            if(tempCArray.dataStore[inner] > tempCArray.dataStore[inner+1])
            {
                swap(tempCArray.dataStore, inner, inner+1);
            }
        }
    }

    var stop = new Date().getTime();
    var elapsed = stop - start;

    var dataResult = document.getElementById("bubble_data");
    dataResult.innerHTML = tempCArray.toString();
    var timeResult = document.getElementById("bubble_time");
    timeResult.value = "消耗的時間為："+elapsed+"毫秒";
}

3.選擇排序

//sort.js
function selectionSort(){
    var tempCArray = newData;
    var nums = tempCArray.numElements;
    var start = new Date().getTime();

    var min;
    for(var outer=0; outer<nums-1; outer++)
    {
        min = outer;
        for(var inner=outer+1; inner<nums; inner++)
        {
            if(tempCArray.dataStore[min]>tempCArray.dataStore[inner])
            {
                min = inner;
            }
        }
        swap(tempCArray.dataStore, outer, min);
    }

    var stop = new Date().getTime();
    var elapsed = stop - start;

    var dataResult = document.getElementById("selection_data");
    dataResult.innerHTML = tempCArray.toString();
    var timeResult = document.getElementById("selection_time");
    timeResult.value = "消耗的時間為："+elapsed+"毫秒";
}

4.插入排序

//sort.js
function insertionSort(){
    var tempCArray = newData;
    var nums = tempCArray.numElements;
    var start = new Date().getTime();

    var temp, inner;
    for(var outer = 1; outer < nums; outer++)
    {
        temp = tempCArray.dataStore[outer];
        inner = outer;
        while(inner>0 && temp<tempCArray.dataStore[inner-1])//迴圈內不要用swap函式，雖然這樣可行，但是執行時間較長，並不是插入排序的思想
        {
            tempCArray.dataStore[inner] = tempCArray.dataStore[inner-1];
            inner--; 
        }
        tempCArray.dataStore[inner] = temp;
    }

    var stop = new Date().getTime();
    var elapsed = stop - start;

    var dataResult = document.getElementById("insertion_data");
    dataResult.innerHTML = tempCArray.toString();
    var timeResult = document.getElementById("insertion_time");
    timeResult.value = "消耗的時間為："+elapsed+"毫秒";
}