一、介绍
1、入栈
首先介绍一下push和unshift的使用
push（push进来的数据放到最后面）：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits);//["Banana", "Orange", "Apple", "Mango","Kiwi"]
unshift（unshift进来的数据放到最前面）：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Kiwi");
console.log(fruits);//["Kiwi","Banana", "Orange", "Apple", "Mango"]
因为一般是把[0]——也就是第一个进来的数作为栈底，所以选择push将后进入的数作为栈顶放在后面。
代码：
//入栈方法（加到栈顶）
in(value) {
//一般[0]的位置时栈底
this.items.push(value)
}
2、出栈
首先介绍一下pop和shift的使用
pop（删除数组中的最后一个项目）：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
console.log(fruits);//["Banana", "Orange", "Apple"]
shift（删除数组中的第一个项目）：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
console.log(fruits);//["Orange", "Apple", "Mango"]
因为一般是把[0]——也就是第一个进来的数作为栈底，所以选择pop将最后一个数删除。
代码：
//出栈（遵循后入(栈顶)先出的原则）
out() {
return this.size() > 0 ? this.items.pop() : null;
}
3、栈顶
栈顶指的是 数组总长度-1 这个位置的数，所以我们只需要把这个数 return 出来即可
代码：
//弹栈（取到栈顶的值,不删除）
top() {
return this.size() > 0 ? this.items[this.size() - 1] : null;
}
4、栈长度
栈长度指的是这个数组的总长度，使用 length 获取即可
代码：
//计算栈的长度
size() {
return this.items.length
}
二、整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>栈数据结构的实现</title>
</head>
<body>
<script>
class Stack {
//构造器
constructor() {
this.items = [];
}
//入栈（加到栈顶）
in(value) {
//一般[0]的位置时栈底
this.items.push(value)
}
//出栈（遵循后入(栈顶)先出的原则）
out() {
return this.size() > 0 ? this.items.pop() : null;
}
//弹栈（取到栈顶的值,不删除）
top() {
return this.size() > 0 ? this.items[this.size() - 1] : null;
}
//计算栈的长度
size() {
return this.items.length
}
}
//实例化对象
let stack = new Stack();
stack.in(0);
stack.in(1);
stack.in(2);
console.log(stack.items)// [0, 1, 2]
stack.out();
console.log(stack.items)// [0, 1]
console.log(stack.top())// 1
console.log(stack.size())// 2
</script>
</body>
</html>
前端所有面试题源码地址：https://gitee.com/daiwanghao/front-end-interview-questions.git
以上就是实现一个栈数据结构的内容，请大家关注《前端面试题》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。