JavaScript数据结构与算法之栈详解
本文详细解析JavaScript中栈数据结构的实现，涵盖面向过程与面向对象两种编程范式。通过数组模拟和对象键值对模拟，逐步展示push、pop、peek等核心方法的源码编写，帮助开发者深入理解栈的后进先出特性及代码设计思路。
1.认识栈
栈（stack），亦称堆栈，是一种运算受限的线性表结构。其核心特征遵循后进先出（LIFO）原则。
栈顶：指允许进行插入和删除操作的表尾位置。
栈底：指固定不变的表头位置，不允许在此进行插入或删除操作。
进栈：向栈中插入新元素的操作，也称为入栈或压栈。具体操作是将新元素置于当前栈顶元素之上，使其成为新的栈顶元素。
出栈：从栈中删除元素的操作，也称为退栈。具体操作是移除当前栈顶元素，并使原栈顶的相邻元素成为新的栈顶元素。
2.面向过程方法源码编写栈
2.1思考
面向过程的核心思想：
将解决问题的步骤进行详细分析，
随后通过具体的函数来实现这些步骤，
只需按顺序逐步执行并调用这些函数即可完成操作。
2.2需要实现的方法
- push（element）：向栈顶添加一个或多个元素。
- pop（）：删除栈顶元素，并返回被移除的元素。
- peek（）：返回栈顶元素，但不移除它。
- isEmpty（）：判断栈是否为空，若为空则返回true。
- clear（）：清空栈中所有元素。
- size（）：返回栈中当前元素的个数。
在实现之前，我们需要思考具体的实现策略。
首先考虑借用数组的方法来模拟栈的行为，因此需要创建一个
空数组来作为栈的底层存储结构。
2.3源码实现，并调用类
构建一个类，利用数组来模拟栈的功能，
在类内部定义各种操作方法。
部分方法直接调用数组内置的方法。
总体而言，是通过类来封装
数组的方法，从而实现对栈的模拟。
class Stack {
constructor() {
this.item = []
}
push(element) {
this.item.push(element)
}
pop() {
return this.item.pop()
}
peek() {
return this.item[this.item.length - 1]
}
isEmpty() {
return this.item.length === 0
}
clear() {
this.item = []
size() {
return this.item.length
}
}
//实例化Stack类
const stack = new Stack()
stack.push(4)
stack.push(6)
console.log( stack.pop())
console.log(stack.peek())
console.log(stack.isEmpty())
console.log(stack.size())运行结果：
3.用面向对象的方法来源码书写
3.1思考
面向对象的核心思想：
将构建问题的事物分解为若干个对象，
建立对象的目的并非为了完成某个单一步骤，而是为了
描述某个事物在解决问题过程中的行为特征。
3.2需要实现的方法
- push（element）：向栈顶添加一个或多个元素。
- pop（）：删除栈顶元素，并返回被移除的元素。
- peek（）：返回栈顶元素，但不移除它。
- isEmpty（）：判断栈是否为空，若为空则返回true。
- clear（）：清空栈中所有元素。
- size（）：返回栈中当前元素的个数。
- toString()：将栈的内容以字符串形式打印输出。
在实现这个类时，我们采用对象来模拟栈的结构。
3.3源码及使用类
class Stack {
constructor() {
this.count=0
this.items = {}
}
push(element) {
this.items[this.count]=element
this.count++
}
pop() {
if(this.isEmpty()){
return undefined
}
this.count--
const result=this.items[this.count]
delete this.items[this.count]
return result
}
peek() {
if(this.isEmpty()){
return undefined
}
return this.items[this.count-1]
}
isEmpty() {
return this.count===0
}
clear() {
this.items={}
this.count=0
}
size() {
return this.count
}
toString(){
if(this.isEmpty()){
return undefined
}
let objectString=`${this.items[0]}`
for(let i=1;i<this.count;i++){
objectString=`${objectString},${this.items[i]}`
}
return objectString
}
}
const stack = new Stack()
stack.push(23)
stack.push(34)
stack.push(80)
console.log( stack.pop())
console.log(stack.peek())
console.log(stack.isEmpty())
console.log(stack.size())
console.log(stack.toString())在使用对象模拟栈时，采用了键值对的方式
来存储数据，例如通过this.items[this.count]=element
这种结构，利用this.count来记录栈的大小（即元素个数）。
当我们向栈中插入一个数字时，就将count作为键，
插入的值作为值。此时需要将this.count自增1。
关于pop（）与peek()、toString()方法，都需要
先判断栈是否为空，如果为空则返回undefined。
4.总结
- 了解了面向对象与面向过程的区别。
- 掌握了使用数组和对象两种方式来模拟栈。
- 对栈的模拟进行了完整的源码设计。
到此这篇关于JavaScript数据结构与算法之栈详解的文章就介绍到这了,更多相关JS栈详解内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38