栈是一种准从后进先出（LIFO）原则的有序集合。新添加的或待删除的元素都保存在栈的同一端，称作栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。

一、创建栈

首先我们创建一个类来表示栈，并使用数组用于存储栈里的元素。

function Stack() {
  // 用于存储栈元素
    this.items = [];
  
    // 各种属性和方法声明
  //添加一个或多个新元素到栈顶。
  this.push = function(elements) {};
  
  // 移除栈顶元素，同时返会被移除的元素。
  this.pop = function() {};
  
    // 返回栈顶的元素，不对栈做任何修改（这个方法不会移除栈顶的元素，仅仅返回它）。
    this.peek = function() {};
  
    // 用于判断栈是否为空，是返回 true，否则返回 false。
    this.empty = function() {};
  
    // 清空一个栈
    this.clear = function() {};
  
  // 返回栈里的元素个数，这个方法和数组的 length 属性很相似
  this.size = function() {}
  
  // 打印栈元素
  this.print = function() {
    console.log(this.items.toString())
  }
}

二、代码实现

1. 向栈添加元素

由于栈是后进先出（LIFO），所以每次添加的元素都会到栈顶，我们实现如下：

// 使用 ... （展开符）用于添加多个元素支持
this.push = function(...elements) {
    Array.prototype.push.call(this.items, ...elements)
}

2. 从栈移除元素

栈遵从的是后进先出（LIFO）原则，所以每次移除都是栈顶的元素（即最后添加的元素），我们实现如下：

// 使用数组的 pop 方法将最后一位移除，并返回移除元素
this.pop = function() {
    return this.items.pop();
}

3. 查看栈顶元素

要想获取最后添加元素，我们定义一个 peek 方法，用于查看栈顶元素，实现如下：

// 由于我们使用数组存储栈元素，因此只需返回数组的最后一项即可
this.peek = function() {
    return this.items[this.items.length -1];
}

4. 判断栈是否为空

接下来我们要实现的是栈的 isEmpty 方法，如果栈为空则返回 true,否则返回 false，这个我们简单的使用数组的 length 方法来实现：

// 简单使用 length 属性判断
this.isEmpty = function() {
    return this.items.length === 0;
}

// 同理我们也可以实现 size 方法
this.size = function() {
    return this.items.length;
}

5. 清空栈元素

最后我们调用 clear 方法实现栈的清空，我们直接使用数组的 length = 0，具体代码实现如下：

this.clear = function() {
    this.length = 0;
}

三、使用类实现栈

在上一节中我们使用构造函数实现了一个栈，不过无法避免全局对象 items 的使用，这样在多个 Stack 实例中就不太好了，所以我们需要

class Stack {
  // 用于存储栈元素
  private items: Array<any> = [];

  constructor() {
    // 实例化时初始化栈对象
    this.items = [];
  }

  // 各种属性和方法声明
  //添加一个或多个新元素到栈顶。
  push(...elements) {
    Array.prototype.push.call(this.items, ...elements)
  }

  // 移除栈顶元素，同时返会被移除的元素。
  pop() {
    return this.items.pop();
  }

  // 返回栈顶的元素，不对栈做任何修改（这个方法不会移除栈顶的元素，仅仅返回它）。
  peek() {
    return this.items[this.items.length - 1];
  }

  // 用于判断栈是否为空，是返回 true，否则返回 false。
  isEmpty() {
    return this.items.length === 0;
  }

  // 清空一个栈
  clear() {
    this.items.length = 0;
  }

  // 返回栈里的元素个数，这个方法和数组的 length 属性很相似
  size() {
    return this.items.length;
  }
  
  // 打印栈元素
  print() {
    console.log(this.items.toString())
  }
}

四、小结

本次我们简单使用构造函数和类的方法实现了栈，通过对比两种写法，我们发现，实现的差异性不大，不过代码看起来更加简洁、直观，也更适合创建多实例。

在我们的开发场景中，栈的使用场景也很普遍，主要有逆序输出、语法检查，符号成对出现、进制转换等。相关使用场景可自行查找，这里不再赘述。

本文同步更新于语雀：

https://www.yuque.com/luchx/ziwg5m/qnrmbw

个人github:

https://github.com/luchx

个人公众号：前端杂论