栈(Stack)——只用 pop 和 push 完成增删的“数组”

164 阅读1分钟

栈(stack)可以理解为特殊的数组,他们只能使用pop和push完成增删的数组。栈是一种后进先出的数据结构,如下图示例:

image.png

image.png

可以看出有两个特征:

  1. 只允许从尾部添加元素。
  2. 只允许从尾部去除元素。

对应的数据方法就是push和pop,因此我们可以任务栈在javaScript中,就是限制只用能push添加元素,和pop移除元素的一种特殊的数组。

下面用代码示例就是:

// 初始状态,栈空
const stack = []  
// 入栈过程
stack.push('东北大板')
stack.push('可爱多')
stack.push('巧乐兹')
stack.push('冰工厂')
stack.push('光明奶砖')

// 出栈过程,栈不为空时才执行
while(stack.length) {
    // 单纯访问栈顶元素(不出栈)
    const top = stack[stack.length-1]
    console.log('现在取出的冰淇淋是', top)  
    // 将栈顶元素出栈
    stack.pop()
}

// 栈空
stack // []

//可以看出打印依次是:
//光明奶砖
//冰工厂
//巧乐兹
//可爱多
//东北大板

栈在业务中或者框架中也有很多案例,比如:

1.项目中,将文章内容中引号”“替换成中文的括号「」

2.vue源码记录当前的观察者,在本文的65-75行。【这篇文章是我在阅读vue2源码之后提取的单文件,也是做一个总结吧。】

Stack类:

class Stack<T> {
  stack: T[]
  constructor() {
    this.stack = []
  }

  /**
   * 入栈 
   */
  pushStack(item: T) {
    return this.stack.push(item)
  }

  /**
   * 出栈
   */
  popStack() {
    return this.stack.pop()
  }

  /**
   * 栈长度 
   */
  size() {
    return this.stack.length
  }

  /**
   * 是否为空 
   */
  isEmpty() {
    return !!this.stack.length
  }

  /**
   * 栈底元素 
   */
  root() {
    return this.stack[0]
  }

  /**
   * 栈顶元素
   */
  current() {
    return this.stack[this.stack.length - 1]
  }

}