前端面試攻略1------算法部分
阿新 • • 發佈：2019-03-02
深度 first 叠代 影響 更多 分治 push 做到 col 1、基本排序的方式
2、二分搜索
前端面試攻略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）
堆排序特點：
堆排序可以說是一種利用堆的概念來排序的選擇排序。分為兩種方法：
- 大頂堆：每個節點的值都大於或等於其子節點的值，在堆排序算法中用於升序排列
- 小頂堆：每個節點的值都小於或等於其子節點的值，在堆排序算法中用於降序排列
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）
作為一種典型的分而治之思想的算法應用，歸並排序的實現由兩種方法：
- 自上而下的遞歸（所有遞歸的方法都可以用叠代重寫，所以就有了第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）
桶排序是計數排序的升級版。它利用了函數的映射關系，高效與否的關鍵就在於這個映射函數的確定。
為了使桶排序更加高效，我們需要做到這兩點：
- 在額外空間充足的情況下，盡量增大桶的數量
- 使用的映射函數能夠將輸入的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; }
2、二分搜索
二分搜索法：
也稱折半搜索，是一種在有序數組中查找特定元素的搜索算法。
實現步驟：
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));
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>
更多排序算法： https://www.cnblogs.com/onepixel/p/7674659.html
前端面試攻略1------算法部分