學習JavaScript數據結構與算法（一）：棧與隊列

本系列的第一篇文章: 學習JavaScript數據結構與算法（一），棧與隊列
第二篇文章：學習JavaScript數據結構與算法（二）：鏈表
第三篇文章：學習JavaScript數據結構與算法（三）：集合
第四篇文章：學習JavaScript數據結構與算法（四）：二叉搜索樹

學習原由

曾經有一次在逛V2EX時，碰到這麼一個帖子。

數學徹底還給老師了，想學回一些基礎數學，大概是高中程度的，有什麼書籍推薦？

發帖的樓主大學沒有高數課程，出去工做時一直在從事前端的工做。感受到數學知識的匱乏，因此想補一補數學。
看了看帖子，感受和我很像，由於個人專業是不開高數的，我學的也是前端。也一樣感受到了數學知識匱乏所帶來的困頓。同時由於本身的數學思惟實在是不怎麼好，因此決定努力補習數學與計算機基礎知識。

當時也有人說:"前端須要什麼數據結構與算法"，可是對於這個事情我有本身的見解。

我並不認爲前端不須要算法之類的知識，在我看來前端具有堅實的計算機基礎，對自身發展是極其有利的。我想作程序員。而不是一生的初級前端和碼農。

也算是給本身的勉勵吧。畢竟基礎決定上限，再加上本身對計算機真的很感興趣，因此學起來就算很累，但也是很幸福的。因而去網上選購了《學習JavaScript數據結構與算法》這本書，配合着去圖書館借閱的《大話數據結構》，開始了數據結構與算法的初步學習。

這本書講的內容非常不錯，清晰易懂。同時用JavaScipt語言實現，學起來的難度低。值得一看呢。

棧

書中前兩章是對JavaScipt基礎與數組經常使用操做的講解，若是不清楚的話,推薦去看看下面這篇博客。

JavaScipt之數組操做

接下來就是數據結構的第一部分，棧。

棧是一種聽從後進先出原則(LIFO,全稱爲Last In First Out)的有序集合。棧頂永遠是最新的元素。
舉個例子就是:棧就像放在箱子裏的一疊書 你要拿下面的書先要把上面的書拿開。(固然，你不能先拿下面的書。)
看圖示也可明白。

JavaScipt中棧的實現

首先，建立一個構造函數。

/**
 * 棧的構造函數
 */
function Stack() {

  // 用數組來模擬棧
  var item = [];
}

棧須要有以下的方法:

• push(element(s)): 添加幾個元素到棧頂

• pop(): 移除並返回棧頂元素

• peek(): 返回棧頂元素

• isAmpty: 檢查棧是否爲空，爲空則返回true

• clear: 移除棧中全部元素

• size: 返回棧中元素個數。

• print: 以字符串顯示棧中全部內容

push方法的實現

說明: 須要往棧中添加新元素，元素位置在隊列的末尾。也就是說，咱們能夠用數組的push方法來模擬實現。
實現:

/**
 * 將元素送入棧，放置於數組的最後一位
 * @param  {Any} element 接受的元素，不限制類型
 */
this.push = function(element) {
  items.push(element);
};

pop方法的實現

說明: 須要把棧頂元素彈出，同時返回被彈出的值。能夠用數組的pop方法來模擬實現。
實現:

/**
 * 彈出棧頂元素
 * @return {Any} 返回被彈出的值
 */
this.pop = function() {
  return items.pop();
};

peek方法的實現

說明: 查看棧頂元素，能夠用數組長度來實現。
實現:

/**
 * 查看棧頂元素
 * @return {Any} 返回棧頂元素
 */
this.peek = function() {
  return items[items.length - 1];
}

其他方法的實現

說明: 前三個是棧方法的核心，其他方法則在此一次性列出。由於下文要講的隊列，會與這部分有很大重合。
實現:

/**
 * 肯定棧是否爲空
 * @return {Boolean} 若棧爲空則返回true,不爲空則返回false
 */
this.isAmpty = function() {
  return items.length === 0
};

/**
 * 清空棧中全部內容
 */
this.clear = function() {
  items = [];
};

/**
 * 返回棧的長度
 * @return {Number} 棧的長度
 */
this.size = function() {
  return items.length;
};

/**
 * 以字符串顯示棧中全部內容
 */
this.print = function() {
  console.log(items.toString());
};

實際應用

棧的實際應用比較多，書中有個十進制轉二進制的函數。(不懂二進制怎麼算的話能夠百度)下面是函數的源代碼。
原理就是輸入要轉換的數字，不斷的除以二並取整。而且最後運用while循環，將棧中全部數字拼接成字符串輸出。

/**
 * 將10進制數字轉爲2進制數字
 * @param  {Number} decNumber 要轉換的10進制數字
 * @return {Number}           轉換後的2進制數字
 */
function divideBy2(decNumber) {

  var remStack = new Stack(),
    rem,
    binaryString = '';

  while (decNumber > 0) {
    rem = Math.floor(decNumber % 2);
    remStack.push(rem);
    decNumber = Math.floor(decNumber / 2);
  }

  while (!remStack.isAmpty()) {
    binaryString += remStack.pop().toString();
  }

  return binaryString;
};

到此而言，棧的學習就告一段落了。由於源代碼中註釋較多，因此這兒就不貼出源代碼的內容了。有興趣的能夠本身下載查看。

源代碼

隊列

隊列與棧是很相像的數據結構，不一樣之處在於隊列是是先進先出(FIFO:First In First Out)的。
舉個例子: 火車站排隊買票，先到的先買。(插隊的不算)，是否是很好理解了~

JavaScipt中隊列的實現

隊列的實現和棧很像。首先依然是構造函數:

/**
 * 隊列構造函數
 */
function Queue() {
  var items = [];
}

隊列須要有以下的方法:

• enqueue(element(s)): 向隊列尾部添加幾個項

• dequeue(): 移除隊列的第一項(也就是排在最前面的項)

• front(): 返回隊列的第一個元素，也就是最新添加的那個

其他方法與隊列相同

enqueue方法的實現

說明: 向隊列尾部添加幾個項。
實現:

/**
 * 將元素推入隊列尾部
 * @param  {Any} ele 要推入隊列的元素
 */
this.enqueue = function(ele) {
  items.push(ele);
};

dequeue方法的實現

說明: 移除隊列的第一項。
實現:

/**
 * 將隊列中第一個元素彈出
 * @return {Any} 返回被彈出的元素
 */
this.dequeue = function() {
  return items.shift()
};

front方法的實現

說明: 返回隊列的第一個元素，也就是最新添加的那個。
實現:

/**
 * 查看隊列的第一個元素
 * @return {Any} 返回隊列中第一個元素
 */
this.front = function() {
  return items[0];
};

以上的三個方法，就是隊列這種數據結構的核心方法了。其實很好理解的。

實際應用

書上的是個擊鼓傳花的小遊戲。原理就是循環到相應位置時，隊列彈出那個元素。最後留下的就是贏家。
源代碼以下:

/**
 * 擊鼓傳花的小遊戲
 * @param  {Array}  nameList 參與人員列表
 * @param  {Number} num      在循環中要被彈出的位置
 * @return {String}          返回贏家(也就是最後活下來的那個)
 */
function hotPotato(nameList, num) {
  var queue = new Queue();

  for (var i = 0; i < nameList.length; i++) {
    queue.enqueue(nameList[i]);
  }

  var eliminated = '';

  while (queue.size() > 1) {
    for (var i = 0; i < num; i++) {
      queue.enqueue(queue.dequeue());
    }

    eliminated = queue.dequeue();
    console.log(eliminated + " Get out!")
  }

  return queue.dequeue()
}

具體實現，有興趣的同窗能夠本身下載源代碼，試一試。

源代碼

隊列的學習到此就告一段落了。下一期將講述另一種數據結構: 鏈表。

感想

不少時候看書，直接看算法導論或者一些數據結構的書，都是很迷糊的。後來才發現，看書從本身能看懂的開始，由淺入深纔是適合本身的學習方式。

前端路漫漫，且行且歌~

最後附上本人博客地址和原文連接，但願能與各位多多交流。

Lxxyx的前端樂園
原文連接：寒假前端學習(3)——學習JavaScript數據結構與算法，棧與隊列