JS棧結構的簡單封裝
棧:是一種遵循後進先出(Last In First Out / LIFO) 原則的一種有序集合。
新新增或者要刪除的元素都會儲存在棧的同一端,我們把它叫做棧頂,另外一端叫做棧底。
在棧中所有的新元素都接近棧頂,而所有的舊元素都接近棧底。
在我們的生活中也有很多類似於棧這種結構的例子:
我們將棧視作是一個容器,比如水杯。它只有一個入口和出口就是杯子的頂部(和我們的棧非常相似)。我們向杯子中放入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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 棧鏈式結構簡單操作
- 簡單封裝get和jsonp封裝JSON
- Retrofit的簡單封裝封裝
- IQueryable的簡單封裝封裝
- ProgressFragment的簡單封裝Fragment封裝
- 簡單封裝分頁功能pageView.js封裝ViewJS
- JS 裡的資料結構 - 棧JS資料結構
- BaseActivity與BaseFragment的簡單封裝Fragment封裝
- 一個簡單的 Amqp 封裝MQ封裝
- 【資料結構與演算法】二叉搜尋樹的簡單封裝資料結構演算法封裝
- js資料結構之棧JS資料結構
- js資料結構--棧(stack)JS資料結構
- 一個簡單vue.config.js配置和axios簡單封裝VueJSiOS封裝
- Fetch API 簡單封裝API封裝
- 二維碼簡單封裝封裝
- 基於Vue.js封裝一個簡單的select元件Vue.js封裝元件
- Golang 對MongoDB的操作簡單封裝GolangMongoDB封裝
- 陣列常用方法的簡單封裝陣列封裝
- AndroidBroadcast做的簡單封裝:AndroidAST封裝
- 一個封裝簡單使用簡單的雷達檢視封裝
- JS資料結構-棧-練習JS資料結構
- js實現資料結構--棧JS資料結構
- 從簡單的線性資料結構開始:棧與佇列資料結構佇列
- 特殊資料結構:單調棧資料結構
- 5-AVI–Fragment簡單封裝Fragment封裝
- iOS 基於FMDB簡單封裝iOS封裝
- 對getElementsByTagName()方法簡單封裝封裝
- 簡單問題,封裝和框架!封裝框架
- 封裝一個簡單的日曆元件封裝元件
- 封裝一個簡單的動畫函式封裝動畫函式
- c# Quartz.net的簡單封裝C#quartz封裝
- 一個最簡單的類JQuery封裝jQuery封裝
- JVM結構的簡單梳理JVM
- 專案重構之網路篇 根據OkHttp封裝簡單的框架HTTP封裝框架
- 微信小程式wx.request的簡單封裝微信小程式封裝
- javascript物件導向的封裝簡單介紹JavaScript物件封裝
- Kotlin中Retrofit與RxJava的簡單封裝KotlinRxJava封裝
- SqlSugar 多資料來源的簡單封裝SqlSugar封裝