前端面試攻略1------算法部分

前端面試攻略1------算法部分

一、基本排序的方式

　　冒泡法（Bubble Sort）：

　　　　冒泡排序特色：

　　　　何時最快（Best Cases）：

　　　　　　當輸入的數據已是正序時

　　　　何時最慢（Worst Cases）：

　　　　　　當輸入的數據是反序時

　　

function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j+1]) {        //相鄰元素兩兩對比
                var temp = arr[j+1];        //元素交換
                arr[j+1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}

　　快速排序（Quick Sort）

　　　　快速排序特色：

　　又是一種分而治之思想在排序算法上的典型應用。本質上來看，快速排序應該算是在冒泡排序基礎上的遞歸分治法。快速排序的名字起的是簡單粗暴，由於一聽到這個名字你就知道它存在的意義，就是快，並且效率高! 它是處理大數據最快的排序算法之一了。

　　快速排序的最壞運行狀況是O(n²)，好比說順序數列的快排。但它的平攤指望時間是O(n log n) ，且O(n log n)記號中隱含的常數因子很小，比複雜度穩定等於O(n log n)的歸併排序要小不少。因此，對絕大多數順序性較弱的隨機數列而言，快速排序老是優於歸併排序。

　　快速排序的內循環比大多數排序算法都要短小，這意味着它不管是在理論上仍是在實際中都要更快。它的主要缺點是很是脆弱，在實現時要很是當心才能避免低劣的性能。

function quickSort(arr, left, right) {
    var len = arr.length,
        partitionIndex,
        left = typeof left != 'number' ? 0 : left,
        right = typeof right != 'number' ? len - 1 : right;

    if (left < right) {
        partitionIndex = partition(arr, left, right);
        quickSort(arr, left, partitionIndex-1);
        quickSort(arr, partitionIndex+1, right);
    }
    return arr;
}

function partition(arr, left ,right) {     //分區操做
    var pivot = left,                      //設定基準值（pivot）
        index = pivot + 1;
    for (var i = index; i <= right; i++) {
        if (arr[i] < arr[pivot]) {
            swap(arr, i, index);
            index++;
        }        
    }
    swap(arr, pivot, index - 1);
    return index-1;
}

function swap(arr, i, j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
}

 

　　堆排序（Heap Sort）

堆排序特色：

堆排序能夠說是一種利用堆的概念來排序的選擇排序。分爲兩種方法：

1. 大頂堆：每一個節點的值都大於或等於其子節點的值，在堆排序算法中用於升序排列
2. 小頂堆：每一個節點的值都小於或等於其子節點的值，在堆排序算法中用於降序排列

var len;    //由於聲明的多個函數都須要數據長度，因此把len設置成爲全局變量

function buildMaxHeap(arr) {   //創建大頂堆
    len = arr.length;
    for (var i = Math.floor(len/2); i >= 0; i--) {
        heapify(arr, i);
    }
}

function heapify(arr, i) {     //堆調整
    var left = 2 * i + 1,
        right = 2 * i + 2,
        largest = i;

    if (left < len && arr[left] > arr[largest]) {
        largest = left;
    }

    if (right < len && arr[right] > arr[largest]) {
        largest = right;
    }

    if (largest != i) {
        swap(arr, i, largest);
        heapify(arr, largest);
    }
}

function swap(arr, i, j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
}

function heapSort(arr) {
    buildMaxHeap(arr);

    for (var i = arr.length-1; i > 0; i--) {
        swap(arr, 0, i);
        len--;
        heapify(arr, 0);
    }
    return arr;
}

 

　　插入排序（Insertion Sort）

function insertionSort(arr) {
    var len = arr.length;
    var preIndex, current;
    for (var i = 1; i < len; i++) {
        preIndex = i - 1;
        current = arr[i];
        while(preIndex >= 0 && arr[preIndex] > current) {
            arr[preIndex+1] = arr[preIndex];
            preIndex--;
        }
        arr[preIndex+1] = current;
    }
    return arr;
}

 

　　歸併排序（Merge Sort）

　　做爲一種典型的分而治之思想的算法應用，歸併排序的實現由兩種方法：

1. 自上而下的遞歸（全部遞歸的方法均可以用迭代重寫，因此就有了第2種方法）
2. 自下而上的迭代

function mergeSort(arr) {  //採用自上而下的遞歸方法
    var len = arr.length;
    if(len < 2) {
        return arr;
    }
    var middle = Math.floor(len / 2),
        left = arr.slice(0, middle),
        right = arr.slice(middle);
    return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right)
{
    var result = [];

    while (left.length>0 && right.length>0) {
        if (left[0] <= right[0]) {
            result.push(left.shift());
        } else {
            result.push(right.shift());
        }
    }

    while (left.length)
        result.push(left.shift());

    while (right.length)
        result.push(right.shift());

    return result;
}

　　桶排序（Bucket Sort）

　　桶排序是計數排序的升級版。它利用了函數的映射關係，高效與否的關鍵就在於這個映射函數的肯定。
爲了使桶排序更加高效，咱們須要作到這兩點：

1. 在額外空間充足的狀況下，儘可能增大桶的數量
2. 使用的映射函數可以將輸入的N個數據均勻的分配到K個桶中

　　同時，對於桶中元素的排序，選擇何種比較排序算法對於性能的影響相當重要。

　　何時最快（Best Cases）：

　　當輸入的數據能夠均勻的分配到每個桶中

　　何時最慢（Worst Cases）：

　　當輸入的數據被分配到了同一個桶中

function bucketSort(arr, bucketSize) {
    if (arr.length === 0) {
      return arr;
    }

    var i;
    var minValue = arr[0];
    var maxValue = arr[0];
    for (i = 1; i < arr.length; i++) {
      if (arr[i] < minValue) {
          minValue = arr[i];                //輸入數據的最小值
      } else if (arr[i] > maxValue) {
          maxValue = arr[i];                //輸入數據的最大值
      }
    }

    //桶的初始化
    var DEFAULT_BUCKET_SIZE = 5;            //設置桶的默認數量爲5
    bucketSize = bucketSize || DEFAULT_BUCKET_SIZE;
    var bucketCount = Math.floor((maxValue - minValue) / bucketSize) + 1;   
    var buckets = new Array(bucketCount);
    for (i = 0; i < buckets.length; i++) {
        buckets[i] = [];
    }

    //利用映射函數將數據分配到各個桶中
    for (i = 0; i < arr.length; i++) {
        buckets[Math.floor((arr[i] - minValue) / bucketSize)].push(arr[i]);
    }

    arr.length = 0;
    for (i = 0; i < buckets.length; i++) {
        insertionSort(buckets[i]);                      //對每一個桶進行排序，這裏使用了插入排序
        for (var j = 0; j < buckets[i].length; j++) {
            arr.push(buckets[i][j]);                      
        }
    }

    return arr;
}

 

 

二、二分搜索

二分搜索法：

　　也稱折半搜索，是一種在有序數組中查找特定元素的搜索算法。

實現步驟：

　　1. 首先從數組中間開始查找對比，若相等則找到，直接返回中間元素的索引。

　　2. 若查找值小於中間值，則在小於中間值的那一部分執行步驟1的操做。

　　3. 若查找值大於中間值，則在大於中間值的那一部分執行步驟1的操做。

　　4. 不然，返回結果爲查不到，返回-1。

function binary_search1(arr, key) {
        var low = 0;
        var high = arr.length - 1;

        while (low <= high) {
            var mid = parseInt((low + high) / 2);

            if (key === arr[mid]) {
                return mid;
            }
            else if (key < arr[mid]) {
                high = mid + 1;
            }
            else if (key > arr[mid]) {
                low = mid - 1;
            }
            else {
                return -1;
            }
        }
    }

　　var arr = [1,2,3,4,5,6,7,8];
　　console.log(binary_search1(arr, 3));

 

function binary_search2 (arr, low, high, key) {
        if (low > high) {
            return -1;
        }

        var mid = parseInt((low + high) / 2);

        if (key === arr[mid]) {
            return mid;
        }
        else if (key < arr[mid]) {
            high = mid - 1;
            return binary_search2(arr, low, high, key);
        }
        else if (key > arr[mid]) {
            low = mid + 1;
            return binary_search2(arr, low, high, key);

        }
    }

　　
　　　var arr = [1,2,3,4,5,6,7,8];
　　　console.log(binary_search2(arr, 0, 7, 3));

 

 

三、二叉樹遍歷

例如前序遍歷中序遍歷後序遍歷等，深度優先搜索和廣度優先最好掌握。還有二叉樹的反轉。

二叉樹的遍歷

二叉樹的遍歷指的是按照某種順序，依次訪問二叉樹的每一個節點，有且訪問一次。

二叉樹的遍歷有如下三種

（1）前序遍歷，從根節點，到左子樹，再到右子樹，簡稱根左右。

（2）中序遍歷，從左節點，到根節點，再到右子樹，簡稱左根右。

（3）後序遍歷，從左子樹，到右子樹，再到根節點，簡稱左右根。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            display: flex;
            border:1px solid #000;
            width: 600px;
            margin:0 auto;
            height: 150px;
            align-items: center;
            justify-content:center;
        }
        .wrap div{
            display: flex;
            height: 70%;
            width: 44%; 
            margin:0 3%;
            border:1px solid #000;
            justify-content:center;
            align-items: center;   
            background: #fff;         
        }
        .btn-wrap{
            text-align: center;
            padding-top: 20px;
        }
        .btn-wrap button{
            display: inline-block;
            padding:4px 10px;
        }
        
    </style>
</head>
<body>
    <div class="wrap">
        <div>
            <div>
                <div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div>
                <div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div>
                <div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                </div>
            </div>            
        </div>
    </div>
    <div class="btn-wrap"> 
        <button>前序</button>
        <button>中序</button>
        <button>後序</button>
    </div>
    <script>
        var wrap = document.querySelector(".wrap");
        var btn_wrap = document.querySelector(".btn-wrap");
        var btn1 = btn_wrap.querySelectorAll("button")[0];
        var btn2 = btn_wrap.querySelectorAll("button")[1];
        var btn3 = btn_wrap.querySelectorAll("button")[2];
        var arr = [];
        var last;
        var toggle = false;
        //給按鈕綁定事件
        btn1.onclick = function(){
            if(!toggle){
                toggle = true;
                reset();
                preOrder(wrap);
                showWay();
            }
        }
        btn2.onclick = function(){
            if(!toggle){
                toggle = true;
                reset();
                inOrder(wrap);
                showWay();
            }
        }
        btn3.onclick = function(){
            if(!toggle){
                toggle = true;
                reset();
                postOrder(wrap);
                showWay();
            }
        }
        //二叉樹的遍歷的三種方式
        //(1)前序遍歷（DLR
        function preOrder(node){
            if(node){
                arr.push(node);
                preOrder(node.firstElementChild);
                preOrder(node.lastElementChild);
            }
        }
        //(2)中序遍歷（LDR）
        function inOrder(node){
            if(node){
                inOrder(node.firstElementChild);
                arr.push(node);
                inOrder(node.lastElementChild);
            }
        }
        //(3)後序遍歷（LRD）
        function postOrder(node){
            if(node){
                postOrder(node.firstElementChild);
                postOrder(node.lastElementChild);
                arr.push(node);
            }
        }
        //顯示遍歷的過程
        function showWay(){
            for(var i=0; i<arr.length; i++){
                setTimeout(function(i){
                    return function(){
                        if(i == arr.length-1){
                            toggle = false;
                        }
                        if(last){
                            last.style.background = "white";
                        }
                        arr[i].style.background = "red";
                        last = arr[i];
                    }
                }(i),i*1000)
            }
        }
        //初始化
        function reset(){
            arr = [];
            if(last){
                last.style.background = "white";
            }
        }
    </script>
</body>
</html>

 

 更多排序算法：

http://www.javashuo.com/article/p-apvjfrqu-dq.html