队列 Queue
先进先出FIFO的数组
场景
- 餐厅的点餐
思路
- 首先采用queue作为数据结构
- queue.push作为入队/queue.shift为出队
// html
<!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>Document</title>
<link rel="stylesheet" href="./index.css" >
</head>
<body>
<div id="screen">
</div>
<div>
<button id="setNumber">取号</button>
<button id="getNumber">叫号</button>
</div>
<div>
<span>当前号码：</span><span id="now"></span><br>
<span>当前队列：</span><span id="queue"></span>
</div>
</body>
<script src="./index.js"></script>
</html>
// css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#screen{
border: 1px solid black;
height: 200px;
width: 200px;
}
@media screen and (max-width: 200px) {
#screen{
width: 100%;
}
}
// js
const numberSet = document.querySelector("#setNumber");
const numberGet = document.querySelector("#getNumber");
const screen = document.querySelector("#screen");
const now = document.querySelector("#now");
const queue = document.querySelector("#queue");
let number = 0;
let arr = [];
numberSet.addEventListener('click',
function () {
number++;
arr.push(number);
queue.innerHTML = arr;
now.innerHTML = number;
}
)
numberGet.addEventListener('click',
function () {
let m = arr.shift();
queue.innerHTML = arr;
m ? screen.innerHTML = `请第${m}号客人就餐` : ''
}
)
image.png
栈
例子
- js函数的调用栈
代码
function f1(){
let a = 1;
return a + f2();
}
function f2 () {
let b = 2;
return b + f3();
}
function f3(){
let c = 2;
return c;
}
f1()
image.png
链表
原型链
let array = [1,2,3];
array.__proto__ === Array.prototype;
Array.__proto__ === Object.prototype;
Object.__proto__ === null;
class Node{
constructor(value, node){
this.value = value;
this.next = node;
}
}
