JavaScript數據結構02 - 棧

legendaryedu 發布于2019-08-23 10:22 / 1778人閱讀

摘要：它們就是棧和隊列。概念棧是一種遵循后進先出原則的有序集合。新添加的或待刪除的元素都保存在棧的末尾，稱作棧頂，另一端就叫棧底。在棧里，新元素都靠近棧頂，舊元素都接近棧底。棧也被用在編程語言的編譯器和內存中保存變量方法調用等，比如函數的調用棧。

一、定義 1.1 背景

通過前面一節《JavaScript數據結構01 - 數組》我們知道，可以在數組的任意位置上刪除或添加元素。然而，有時候我們還需要一種在添加或刪除元素時有更多控制的數據結構。

有兩種數據結構類似于數組，但在添加和刪除元素時更為可控。

它們就是棧和隊列。

1.2 概念

棧是一種遵循后進先出（LIFO）原則的有序集合。新添加的或待刪除的元素都保存在棧的末尾，稱作棧頂，另一端就叫棧底。

在棧里，新元素都靠近棧頂，舊元素都接近棧底。

棧也被用在編程語言的編譯器和內存中保存變量、方法調用等，比如函數的調用棧。

二、棧的實現 2.1 創建一個類來表示棧

這里我還是用構造函數的形式來書寫，大家有興趣可以用ES6的Class來重寫一遍。

// Stack類
function Stack () {
  this.items = [];

  this.push = push;
  this.pop = pop;
  this.peek = peek;
  this.isEmpty = isEmpty;
  this.clear = clear;
  this.size = size;
  this.print = print;
}

棧里面有一些聲明的方法：

push(element)：添加一個（或幾個）新元素到棧頂

pop()：移除棧頂的元素，同時返回被移除的元素

peek()：返回棧頂的元素，不對棧做任何修改

isEmpty()：如果棧里沒有任何元素就返回true，否則返回false

clear()：移除棧里的所有元素

size()：返回棧里的元素個數

2.2 實現棧中的輔助方法

// 添加新元素到棧頂
function push (element) {
  this.items.push(element);
}

// 移除棧頂元素，同時返回被移除的元素
function pop () {
  return this.items.pop();
}

// 查看棧頂元素
function peek () {
  return this.items[this.items.length - 1];
}

// 判斷是否為空棧
function isEmpty () {
  return this.items.length === 0;
}

// 清空棧
function clear () {
  this.items = [];
}

// 查詢棧的長度
function size () {
  return this.items.length;
}

// 打印棧里的元素
function print () {
  console.log(this.items.toString());
}

2.3 創建實例進行測試

// 創建Stack實例
var stack = new Stack();

console.log(stack.isEmpty());     // true
stack.push(5);                    // undefined
stack.push(8);                    // undefined
console.log(stack.peek());        // 8
stack.push(11);                   // undefined
console.log(stack.size());        // 3
console.log(stack.isEmpty());     // false
stack.push(15);                   // undefined
stack.pop();                      // 15
console.log(stack.size());        // 3
stack.print();                    // 5,8,11
stack.clear();                    // undefined
console.log(stack.size());        // 0

三、結束

本文會同步到我的個人博客，完整代碼可以到我的github倉庫查看，如果對你有幫助的話歡迎點一個Star~~

歡迎關注我的公眾號

GPU云服務器云服務器 javascript全棧視頻 javascript全棧教程 javascript全棧開發 javascript快速全棧開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96283.html

Day02 - JavaScript + CSS Clock

摘要：作者簡介是推出的一個天挑戰。完整指南在從零到壹全棧部落。通過時分秒對一圈度，進行映射，確定每一個指針所需旋轉的角度。此前的代碼中，每秒都會重新一個對象，用來計算角度值，但如果讓這個角度值一直保持增長，也就不會出現逆時針回旋的問題了。 Day02 - JavaScript + CSS Clock 作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個...

zzbo 2019-08-20 18:07 評論0 收藏0
前端基礎進階（一）：內存空間詳細圖解

摘要：一棧數據結構與不同，中并沒有嚴格意義上區分棧內存與堆內存。引用數據類型的值是保存在堆內存中的對象。不允許直接訪問堆內存中的位置，因此我們不能直接操作對象的堆內存空間。為了更好的搞懂變量對象與堆內存，我們可以結合以下例子與圖解進行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...

_Suqin 2019-08-21 18:30 評論0 收藏0
【Step-By-Step】一周面試題深入解析 / 周刊02

摘要：關于點擊進入項目是我于開始的一個項目，每個工作日發布一道面試題。即使這個時間周期內，小明取得多次滿分。創建作用域鏈在執行期上下文的創建階段，作用域鏈是在變量對象之后創建的。這種一層一層的關系，就是作用域鏈。關于【Step-By-Step】 Step-By-Step (點擊進入項目) 是我于 2019-05-20 開始的一個項目，每個工作日發布一道面試題。每個周末我會仔細閱讀大家的答...

ixlei 2019-08-30 11:04 評論0 收藏0
【Step-By-Step】一周面試題深入解析 / 周刊02

摘要：關于點擊進入項目是我于開始的一個項目，每個工作日發布一道面試題。即使這個時間周期內，小明取得多次滿分。創建作用域鏈在執行期上下文的創建階段，作用域鏈是在變量對象之后創建的。這種一層一層的關系，就是作用域鏈。關于【Step-By-Step】 Step-By-Step (點擊進入項目) 是我于 2019-05-20 開始的一個項目，每個工作日發布一道面試題。每個周末我會仔細閱讀大家的答...

BDEEFE 2019-08-23 17:55 評論0 收藏0
2017-07-02 前端日報

摘要：前端日報精選譯，和的未來學習筆記箭頭函數學習筆記教程柵格布局卷土重來，用還是為什么我會選擇而不是眾成翻譯原生開發入門完全教程從零到壹全棧部落中文一個端帶文件路徑和顏色的攻城方略譯使用提高應用程序的種方式中自定義操作符修仙 2017-07-02 前端日報精選 [譯] TC39，ECMAScript 和 JavaScript 的未來（Part 1）ES6學習筆記：箭頭函數_ES6, Ja...

lemon 2019-08-20 17:42 評論0 收藏0