前端所需要掌握的數據結構與算法

前言

最近在梳理知識結構,在復習數據結構與算法的時候仔細理了一遍。由于內容比較多,現在整理的是基礎的內容: 排序和搜索,更加基礎的內容比如數組的各種方法和demo放在文章底部作為補充資料。

正文

如何在數組中間位置添加數組

首先提個問題,如何在數組中間位置添加數組? 看過?數據結構與算法 javascript描述?的同學可能刷刷寫下如下代碼:

function avaerageAdd(){

? var nums = [1,2,3,4,5,6,7]

? var newElements = [233,666]

? nums.splice(Math.floor(nums.length / 2),0,newElements)

? return nums?

}

但是在看書的同時是否在瀏覽器實現過呢?如果敲過代碼的同學會很容易發現書上的例子是錯的。因為它輸出//[1, 2, 3, Array[2], 4, 5, 6, 7]

它將數組作為一個元素插入,和我們問題不符,我們需要的是[1, 2, 3, 4, 233, 666, 5, 6, 7, 8]

因此我們可以修改代碼如下:

function avaerageAdd(){

? var nums = [1,2,3,4,5,6,7,8]

? var newElements = [233,666]

? nums.splice.apply(nums, [Math.floor(nums.length)/2, 0].concat(newElements))

? return nums // [1, 2, 3, 4, 233, 666, 5, 6, 7, 8]

}

判定給定字符串是否回文

這涉及到堆棧,這些基本概念我就不給了,自行搜索。回文的意思是那么以某個字符為中心的前綴和后綴都是相同的.回文的判斷非常簡單,就是利用堆棧的特性,把字符串壓入堆棧,然后彈出,這樣順序就和原字符串相反,再判斷字符串是否和原字符串相等即可。

function isPalindrome(word){

? var s = new Stack()

? for (var i = 0; i < word.length; ++i) {

? ? s.push(word[i])

? }

? var rword = ""

? while(s.length() > 0){

? rword += s.pop()

? }

? if(word == rword){

? return true

? }else{

? return false

? }

}

如何利用javascript構建Stack也很簡單。將堆棧的特性用原型模式模擬出來即可。代碼如下:

var Stack = function() {

this.dataStore = [];

this.top = 0;

};

Stack.prototype.push = function(element) {

this.dataStore.push(element);

};

Stack.prototype.pop = function() {

return this.dataStore.pop();

};

Stack.prototype.peek = function() {

return this.dataStore[this.dataStore.length - 1];

};

Stack.prototype.length = function() {

return this.dataStore.length;

};

Stack.prototype.isEmpty = function() {

return this.dataStore.length === 0;

};

Stack.prototype.seeAll = function() {

return this.dataStore.join('\n');

};

我們測試幾個字符?aba?hello?vxxnynxxv

排序

冒泡排序

排序是基本功,冒泡排序更是常見,冒泡排序分兩種,一種小泡泡往上吐,一種大泡泡往上吐。也就是從小到大和從大到小。

具體步驟:

冒泡排序就是從最開始的位置或結尾的位置反方向對比,如果比它大/小,就交換然后繼續走,第一遍走完,最后一個位置是最大值或者最小值

根據上面我的描述很容易明白冒泡排序的時間復雜度是O(n^2),因為它是雙重循環 而且它是穩定的。穩定的含義是:穩定排序算法會讓原本有相等鍵值的紀錄維持相對次序.

看代碼:

function exchange(array, i, j) {

var t = array[i];

array[i] = array[j];

array[j] = t;

}

function bubbleSort(numbers) {

for (var i = 0; i < numbers.length; i++) {

for (var j = 0; j < numbers.length - i; j++) {

if (numbers[j] > numbers[j + 1]) {

exchange(numbers, j, j + 1);

}

}

console.log(numbers.toString())

}

return numbers;

}

var nums = [2,3,4,3,1,5,7,122,341,-1]

console.log(bubbleSort(nums))

從代碼中我們可以看到并沒有對相等鍵值的兩個元素進行處理。 對冒泡不太理解可以自己手寫一下冒泡順序然后和下面的圖來對比一下:

快速排序

快速排序簡稱快排,基本上別人問你數據結構學過沒,都會讓你手寫個快排看看。

快排就是一開始找個中介,然后把比它小的放左邊,比它大的放右邊,然后重新對中介兩邊的數據各自重新找個中介,如此循環。

function quickSort(arr) {

  if (arr.length <= 1) { return arr }

console.log("原數組是:" + arr)

  var pivotIndex = Math.floor(arr.length / 2)

  var pivot = arr.splice(pivotIndex, 1)[0]

  var left = []

  var right = []

? console.log("將中介提取出來后數組是:" + arr)

  for (var i = 0 ; i < arr.length ; i++){

console.log("此刻中介是:" + pivot + "當前元素是:" + arr[i])

    if (arr[i] < pivot) {

      left.push(arr[i])

console.log("移動" + arr[i] + "到左邊")

    } else {

      right.push(arr[i])

console.log("移動" + arr[i] + "到右邊")

    }

  }

  return quickSort(left).concat([pivot], quickSort(right))

}

var nums = [2,3,4,3,1,5,7,122,341,-1]

console.log(quickSort(nums))

在腦中循環一下就知道用遞歸來寫最容易理解。 快排的時間復雜度是O(nlogn),屬于不穩定的排序

選擇排序

選擇數組第一個元素,將它和其它所有的元素對比,跟最小的交換,然后從第二個開始,繼續跟后面所有的比,跟剩余里面最小的交換。循環。

選擇排序比較簡單,看描述就能理解。

function selectionSort(numbers) {

? for (var i = 0; i < numbers.length; i++) {

? ? var min = i;

? ? for (var j = i + 1; j < numbers.length; j++) {

? ? ? if (numbers[j] < numbers[min]) {

? ? ? ? min = j;

? ? ? }

? ? }

? ? if (i !== min) {

? ? ? exchange(numbers, i, min);

? ? }

? }

? return numbers;

}

var nums = [2,3,4,3,1,5,7,122,341,-1]

console.log(selectionSort(nums))

選擇排序的時間復雜度是O(n^2),也是不穩定的排序。

插入排序

插入排序它將數組分成“已排序”和“未排序”兩部分,一開始的時候,“已排序”的部分只有一個元素,然后將它后面一個元素從“未排序”部分插入“已排序”部分,從而“已排序”部分增加一個元素,“未排序”部分減少一個元素。以此類推,完成全部排序。

function insertionSort(numbers) {

? console.log("原數組:" + numbers)

? for (var i = 0; i < numbers.length; i++) {

? ? ? ? /*

? ? ? ? * 當已排序部分的當前元素大于value,

? ? ? ? * 就將當前元素向后移一位,再將前一位與value比較

? ? ? ? */

? ? for (var j = i; j > 0 && numbers[j] < numbers[j - 1]; j--) {

? ? ? // If the array is already sorted, we never enter this inner loop!

? ? ? exchange(numbers, j, j - 1);

? ? ? console.log("此時數組:" + numbers)

? ? }

? }

? return numbers;

};

var nums = [2,3,4,3,1,5,7,122,341,-1]

console.log(insertionSort(nums))

插入排序的空間復雜度是O(n^2),而且它是穩定的排序

希爾排序

希爾排序屬于高級排序,因為它其實是利用了多個插入排序來實現。

先將整個待排序的記錄序列分割成為若干子序列分別進行直接插入排序,待整個序列中的記錄“基本有序”時,再對全體記錄進行依次直接插入排序

假設nums = [2,3,4,3,1,5,7,122,341,-1]

如果間隔為3,第一趟將數組下標為 0,4,8 || 1,5,9 || 2,6,10 || 3,7, 分別取出來子序列內部進行排序

然后縮小間隔再排序直到間隔為1時,全部直接插入排序

function shellsort(numbers) {

? console.log("原數組:" + numbers)

? var h = 1;

? while (h < numbers.length / 3) {

? ? h = (3 * h) + 1;

? }

? while (h >= 1) {

? ? console.log("此時h:" + h)

? ? for (var i = h; i < numbers.length; i++) {

? ? ? for (var j = i; j >= h && numbers[j] < numbers[j - h]; j -= h) {

? ? ? ? exchange(numbers, j, j - h);

? ? ? ? console.log("此時數組:" + numbers)

? ? ? }


? ? }

? ? h = --h / 3;

? }

? return numbers;

}

var nums = [2,3,4,3,1,5,7,122,341,-1]

console.log(shellsort(nums))

希爾排序當時上課學的時候其實都用紙筆來進行筆算。這樣記憶比較深刻。希爾排序的間隔是可以自己指定的,一般傳統都是以3開始。

它屬于不穩定的排序,時間復雜度為O(nlog^2n)

歸并算法

歸并算法的原理是將所有元素拆成相鄰的一對一對的,然后兩兩排序,再將相鄰的一對元素再合并排序,四個四個排序,如此循環最后只剩兩組大的已經排好序的數組再合并一起排序。?它依賴歸并操作,歸并操作即:將兩個已經排序的序列合并成一個序列的操作。

function mergeSort(numbers) {

? ? if (numbers.length < 2) {

? ? ? ? return numbers;

? ? }

? ? var middle = Math.floor(numbers.length / 2),

? ? ? ? left = numbers.slice(0, middle),

? ? ? ? right = numbers.slice(middle),

? ? ? ? params = merge(mergeSort(left), mergeSort(right));

? ? params.unshift(0, numbers.length);

? ? numbers.splice.apply(numbers, params);

? ? return numbers;

? ? function merge(left, right) {

? ? ? ? var result = [],

? ? ? ? ? ? il = 0,

? ? ? ? ? ? ir = 0;

? ? ? ? while (il < left.length && ir < right.length) {

? ? ? ? ? ? if (left[il] < right[ir]) {

? ? ? ? ? ? ? ? result.push(left[il++]);

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? result.push(right[ir++]);

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? return result.concat(left.slice(il)) .concat(right.slice(ir));

? ? }

}

var nums = [2,3,4,3,1,5,7,122,341,-1]

console.log(mergeSort(nums))

歸并排序的時間復雜度為O(nlogn),而且需要需要O(n)額外空間,它屬于穩定的排序。

搜索

對于搜索其實一開始沒必要掌握復雜的,循環,正則掌握就能應付基本的需求。

二分搜索

二分查找是基本功,而且需要注意的是,二分查找的前提是數組一開始就是有序的。

function binSearch(arr, data) {

arr = arr.sort(function(a, b) {

? ? return a - b;

? })

console.log(arr)

? var upperBound = arr.length-1;

? var lowerBound = 0;

? while (lowerBound <= upperBound) {

? ? var mid = Math.floor((upperBound + lowerBound) / 2);

? ? console.log("Current midpoint: " + mid);

? ? if (arr[mid] < data) {

? ? ? lowerBound = mid + 1;

? ? ? }

? ? else if (arr[mid] > data) {

? ? ? upperBound = mid - 1;

? ? ? }

? ? else {

? ? ? return mid;

? ? ? }

? ? }

? return -1;

}

var nums = [2,3,4,3,1,5,7,122,341,-1]

console.log(binSearch(nums,122))

補充資料

所有代碼和別的補充已經放在github?而且會不斷更新。有興趣的可以去看看并動手敲一遍。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,182評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,489評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,290評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,776評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,510評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,866評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,860評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,036評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,585評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,331評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,536評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,058評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,754評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,154評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,469評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,273評論 3 399
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,505評論 2 379

推薦閱讀更多精彩內容

  • 某次二面時,面試官問起Js排序問題,吾絞盡腦汁回答了幾種,深感算法有很大的問題,所以總計一下! 排序算法說明 (1...
    流浪的先知閱讀 1,203評論 0 4
  • /*去重*/ function delRepeat(arr){ var newArray=new Array();...
    Hedgehog_Dove閱讀 1,873評論 0 2
  • 排序算法說明 (1)排序的定義:對一序列對象根據某個關鍵字進行排序; 輸入:n個數:a1,a2,a3,…,an 輸...
    code武閱讀 673評論 0 0
  • 李云晞,你現在已沒有能力再和我作對,不如乖乖交出魔法書吧”一個身穿黑色斗蓬的人諷刺的望著李云唏,“是嗎”李云晞笑著...
    LQHYS閱讀 486評論 0 0
  • 粗重的鐵鏈 散掛在錯落的摩天樓峽谷 人們 將自己封在透明的隔離中出行 冰霜蔓延開花的臉頰 慘淡的白日 斜投下一束束...
    飛樹閱讀 225評論 0 0