堆疊是一種遵從后進先出（LIFO）原則的有序集合，新添加或待洗掉的元素都保存在堆疊的同 一端，稱作堆疊頂，另一端就叫堆疊底，在堆疊里，新元素都靠近堆疊頂，舊元素都接近堆疊底，
堆疊擁有以下方法：
push(element): 元素入堆疊， 添加一個或多個新元素到堆疊頂
pop(): 元素出堆疊，移除堆疊頂的元素，同時回傳被移除的元素
peek(): 回傳堆疊頂的元素，不對站內元素做任何修改
isEmpty(): 判斷堆疊是否為空，如果堆疊內沒有任何元素就回傳true，否則回傳false
clear(): 移除堆疊內的所有元素
size(): 回傳堆疊里的元素個數，該方法和陣列的length屬性類似
說明：
陣列的頭部就是堆疊底，陣列的尾部就是堆疊頂
因為是基于javascript的陣列構建的堆疊，所以會用到各種陣列方法，首先創建一個類表示類，這里用到了ES6的語法，接下來便開始逐個實作堆疊中的6個常規方法，
s1.宣告堆疊建構式
1 //在堆疊的建構式中宣告一個空陣列用來保存堆疊內的元素 2 class Stack { 3 constructor() { 4 this.items = []; 5 } 6 }
s2.實作push()方法，元素入堆疊
使用陣列的push方法，將元素放入陣列的末尾，也就是堆疊結構中的堆疊頂，
push(element){
this.items.push(element);
}
s3.實作pop()方法，元素出堆疊,并回傳該元素
根據先進后出的原則，移除的元素是最后添加進堆疊的元素，這里使用陣列的pop方法
pop() {
return this.items.pop();
}
s4.實作peek()方法，查看堆疊頂元素，也就是最后添加進堆疊的元素
在陣列中表現為陣列最后一個索引位置的元素，訪問陣列的最后一個元素可以用 length -1
peek() {
return this.items[this.items.length - 1];
}
s5.實作isEmpty()方法，查看堆疊是否為空
其實就是判斷陣列的長度是否為0
isEmpty() {
return this.items.length === 0;
}
s6.實作clear()方法，清空堆疊內所有元素
直接將陣列重置為空即可
clear() {
return this.items = [];
}
s7.實作size()方法，回傳堆疊的長度
在陣列中的表現就是回傳陣列的length
size() {
return this.items.length;
}
至此，基于陣列搭建的堆疊就完成了，接下來就開始測驗一下！下面的代碼直接復制就可以用了，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
</title>
</head>
<body>
<h1>測驗 堆疊</h1>
<script>
//在堆疊的建構式中宣告一個空陣列用來保存堆疊內的元素
class Stack {
constructor() {
this.items = [];
}
push(element){
this.items.push(element);
}
pop() {
return this.items.pop();
}
peek() {
return this.items[this.items.length - 1];
}
isEmpty() {
return this.items.length === 0;
}
clear() {
return this.items = [];
}
size() {
return this.items.length;
}
}
//首先實體化一個堆疊物件
const stack = new Stack();
stack.push(12); //進堆疊
stack.push(20);
console.log(stack.isEmpty()); //輸出false
console.log(stack.pop()); //輸出20，這里移除了堆疊頂元素20，并回傳了
console.log(stack.peek()); //輸出12，這是回傳元素，12依然保存在堆疊中
console.log(stack.size()); //輸出1
stack.clear(); //清堆疊，此時堆疊空了
console.log(stack.isEmpty()); //輸出true
</script>
</body>
</html>
后面會再寫一篇基于JavaScript物件搭建的堆疊結構實作，純手打不易，轉載請注明出處！
<html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> </title></head><body><h1>測驗 堆疊</h1><script>//在堆疊的建構式中宣告一個空陣列用來保存堆疊內的元素class Stack {constructor() {this.items = [];}push(element){this.items.push(element);}
pop() {return this.items.pop();}
peek() {return this.items[this.items.length - 1];}
isEmpty() {return this.items.length === 0;}
clear() {return this.items = [];}
size() {return this.items.length;}}//首先實體化一個堆疊物件const stack = new Stack();
stack.push(12);//進堆疊stack.push(20);console.log(stack.isEmpty());//輸出falseconsole.log(stack.pop());//輸出20，這里移除了堆疊頂元素20，并回傳了console.log(stack.peek());//輸出12，這是回傳元素，12依然保存在堆疊中
console.log(stack.size());//輸出1
stack.clear();//清堆疊，此時堆疊空了console.log(stack.isEmpty());//輸出true</script></body></html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/175428.html
標籤：JavaScript
上一篇：ES6.x
下一篇：vue-父子組件和ref