编码1(队头在最右)
练习如何使用数组来实现队列,综合考虑使用数组的 push,pop,shift,unshift操作
基于代码,实现如按钮中描述的功能:
- 实现如阅读材料中,队列的相关入队、出队、获取队头、判空的操作
- 队头对应数组中最后一个元素
- 入队和出队操作后,需要在 id 为 queue-cont 的 p 标签中更新显示队列中的内容,队头在最右侧,中间用 -> 连接(练习使用数组的join方法)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS里的居民们4-数组((堆)队列-队头在右)</title>
</head>
<body>
<input id="queue-input" type="text">
<p id="queue-cont">队列内容:apple->pear</p>
<button id="in-btn">入队</button>
<button id="out-btn">出队</button>
<button id="font-btn">打印队头元素内容</button>
<button id="empty-btn">判断队列是否为空</button>
<script>
var queue = ["apple", "pear"];
var buttons=document.getElementsByTagName("button");
var txt=document.getElementById("queue-input");
var queuecont=document.getElementById("queue-cont");
buttons[0].addEventListener("click",function(){
queue.unshift(txt.value);
queuecont.innerHTML="队列内容:"+queue.join("->");
console.log(queue);
})
buttons[1].addEventListener("click",function(){
queue.pop();
queuecont.innerHTML="队列内容:"+queue.join("->");
console.log(queue);
})
buttons[2].addEventListener("click",function(){
var q0=queue[queue.length-1];
queuecont.innerHTML="队列内容:"+q0;
console.log(q0);
})
buttons[3].addEventListener("click",function(){
if(queue.length==0){
console.log("空");
queuecont.innerHTML="队列内容:"+"空";
}
else{
console.log("不为空");
queuecont.innerHTML="队列内容:"+"不为空";
}
})
</script>
</body>
</html>
编码2(队头在最左)
对上面练习稍作小调整:
基于代码,实现如按钮中描述的功能:
- 实现如阅读材料中,队列的相关入队、出队、获取队头、判空的操作
- 队头对应数组中第一个元素
- 入队和出队操作后,需要在 id 为 queue-cont 的 p 标签中更新显示队列中的内容,队头在最左侧,中间用 <- 连接(练习使用数组的join方法)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS里的居民们5-数组((堆)队列-队头在左)</title>
</head>
<body>
<input id="queue-input" type="text">
<p id="queue-cont">队列内容:apple->pear</p>
<button id="in-btn">入队</button>
<button id="out-btn">出队</button>
<button id="font-btn">打印队头元素内容</button>
<button id="empty-btn">判断队列是否为空</button>
<script>
//-> 为->
//<- 为<-
var queue = ["apple", "pear"];
var buttons=document.getElementsByTagName("button");
var txt=document.getElementById("queue-input");
var queuecont=document.getElementById("queue-cont");
buttons[0].addEventListener("click",function(){
queue.push(txt.value);
queuecont.innerHTML="队列内容:"+queue.join("<-");
console.log(queue);
})
buttons[1].addEventListener("click",function(){
queue.shift();
queuecont.innerHTML="队列内容:"+queue.join("<-");
console.log(queue);
})
buttons[2].addEventListener("click",function(){
var q0=queue[0];
queuecont.innerHTML="队列内容:"+q0;
console.log(q0);
})
buttons[3].addEventListener("click",function(){ if(queue.length==0){
console.log("空");
queuecont.innerHTML="队列内容:"+"空";
}
else{
console.log("不为空");
queuecont.innerHTML="队列内容:"+"不为空";
}
})
</script>
</body>
</html>