上篇博客介绍了基于数组创建一个栈,这是用对象创建一个栈
s1.声明一个Stack类
class Stack { constructor() { this.count = 0; this.items = {}; } }
在构造器中定义count属性用来记录栈的大小
s2.push()方法,向栈内添加元素,只允许一次插入一个元素
push(element){ this.items[this.count] = element; this.count++; }
使用 count 变量 作为 items 对象的键名,插入的元素则是它的值。在向栈插入元素后,递增 count 变量
s3.验证栈是否为空isEmpty() 和栈的大小size()
要验证栈是否为空,判断 count 的值是否为 0即可;count 属性也表示栈的大小。返回 count 属性的值来实现 size 方法
isEmpty(){ return this.count === 0; } size(){ return this.count; }
s4.pop()方法,从栈中移除元素并返回
pop(){ if (this.isEmpty){ return undefined; } this.count--; //count减1,得到栈顶元素的索引 const result = this.items[this.count]; //保存栈顶元素,以便删除后返回值 delete this.items.this.count; //使用delete 删除对象的属性 return result; }
s5.peek()方法,查看栈顶元素
peek() {
if (this.isEmpty()) {
return undefined;
}
return this.items[this.count - 1];
}
栈不为空直接返回count - 1位置的元素即可
s6.clear()清空栈
要清空该栈,只需要将它的值复原为构造函数中使用的值即可
clear() {
this.items = {};
this.count = 0;
}
或者循环调用pop移除元素
while (!this.isEmpty()) {
this.pop();
}
下面开始测试,完整代码可以直接复制:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title> 8 9 </title> 10 </head> 11 <body> 12 <h1>测试栈</h1> 13 <script> 14 class Stack { 15 constructor() { 16 this.count = 0; 17 this.items = {}; 18 } 19 push(element){ 20 this.items[this.count] = element; 21 this.count++; 22 } 23 isEmpty(){ 24 return this.count === 0; 25 } 26 27 size(){ 28 return this.count; 29 } 30 pop(){ 31 if (this.isEmpty()){ 32 return undefined; 33 } 34 this.count--; //count减1,得到栈顶元素的索引 35 const result = this.items[this.count]; //保存栈顶元素,以便删除后返回值 36 delete this.items[this.count]; //使用delete 删除对象的属性 37 return result; 38 } 39 peek() { 40 if (this.isEmpty()) { 41 return undefined; 42 } 43 return this.items[this.count - 1]; 44 } 45 clear() { 46 this.items = {}; 47 this.count = 0; 48 } 49 } 50 //首先实例化一个栈对象 51 const stack = new Stack(); 52 53 stack.push(12); //进栈 54 stack.push(20); 55 console.log(stack); 56 console.log(stack.isEmpty()); //输出false 57 console.log(stack.pop()); //输出20,这里移除了栈顶元素20,并返回了 58 console.log(stack.peek()); //输出12,这是返回元素,12依然保存在栈中 59 60 console.log(stack.size()); //输出1 61 62 stack.clear(); //清栈,此时栈空了 63 console.log(stack.isEmpty()); //输出true 64 </script> 65 </body> 66 </html>
测试结果: