JS棧結構的簡單封裝

千鋒武漢發表於2021-05-25

  棧:是一種遵循後進先出(Last In First Out / LIFO) 原則的一種有序集合。

  新新增或者要刪除的元素都會儲存在棧的同一端,我們把它叫做棧頂,另外一端叫做棧底。

  在棧中所有的新元素都接近棧頂,而所有的舊元素都接近棧底。

1

  在我們的生活中也有很多類似於棧這種結構的例子:

  我們將棧視作是一個容器,比如水杯。它只有一個入口和出口就是杯子的頂部(和我們的棧非常相似)。我們向杯子中放入5塊同杯子直徑大小的餅乾,全部放入後我們開始取出餅乾。大家會發現 你最先取出的餅乾是最後放入的那塊,正好也就符合了我們棧的特點(LIFO)

  在程式設計世界中棧也被用來儲存變數、方法呼叫等功能,也被用於瀏覽器的歷史記錄(比如瀏覽器的返回按鈕)。

  那麼下面我們就使用JavaScript的類來建立一個我們的棧。

  class Stack{

  constructor(){

  this.items = [];

  }

  }

  我們需要一種方式來儲存我們棧中的資料,從上面的程式碼可以看到,我這邊選擇的是陣列。但是陣列允許我們在任何位置新增或者刪除元素,我們需要給元素新增和刪除的位置有一個約束,讓我們的陣列能夠遵循 後進先出(LIFO) 的原則。所以接下來需要給我們的棧再新增一些方法。

  // 我們要實現的第一個功能是向棧中新增新元素

  // 並且新增的新元素只能放再棧的頂部(也就是陣列的尾部)

  push(element) {

  this.items.push(element);

  }

  // 應為陣列的push方法也是將新元素新增到陣列的尾部,所以使用陣列push方法來實現

  // 現在我們來為棧新增一個移除元素的方法

  // 棧結構是遵循LIFO的原則,素以移除的元素是最後新增進去的元素

  pop() {

  return this.items.pop();

  }

  // 我們使用陣列的push和pop兩個函式就可以實現後進先出的原則了

  // 繼續為棧新增一些輔助功能

  // peek方法用於檢視棧頂的元素

  peek() {

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

  }

  // isEmpty方法用於檢查棧是否為空

  isEmpty() {

  return !this.items.length;

  }

  // clear方法用於清空棧

  clear() {

  this.items = [];

  }

  // size方法用於檢視棧中元素的數量

  size() {

  return this.items.length;

  }

  以上程式碼就已經實現了我們棧的功能。 接下來我們把它整理到一起來看一下。

  class Stack {

  constructor() {

  this.items = [];

  }

  push(element) {

  this.items.push(element);

  }

  pop() {

  return this.items.pop();

  }

  peek() {

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

  }

  isEmpty() {

  return !this.items.length;

  }

  clear() {

  this.items = [];

  }

  size() {

  return this.items.length;

  }

  }

  接下來就可以使用我們的 Stack 了

  // 我們先來建立一個棧驗證一下是否為空

  const stack = new Stack(); // 新建一個棧

  console.log(stack.isEmpty()); // true

  // 繼續向棧中新增2個元素

  stack.push('hello');

  stack.push('world');

  // 此時我們呼叫peek方法檢視棧頂的元素

  console.log(stack.peek()); // 'world'

  // 呼叫size方法檢視一下元素的數量

  console.log(stack.size()) // 2

  // 繼續向棧中新增元素

  stack.push('.');

  stack.push('JavaScript');

  // 移出一個元素

  console.log(stack.pop()); // 'JavaScript'

  // 清空棧

  stack.clear();

  console.log(stack.size()); // 0

  console.log(stack.isEmpty()); // true

  最後,還有一些專業詞彙希望大家能夠掌握:

  向棧中新增元素: 我們可以稱其為 入棧、壓棧、壓入

  從棧中移除元素: 我們可以稱其為 出棧、彈出

  希望以上的分享能幫到大家。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2773798/,如需轉載,請註明出處,否則將追究法律責任。

相關文章