《队列》队列是一个先进先出的数组两个常用的API：入队queue.push，出队queue.shift实现一个餐厅叫号网

队列是一个先进先出的数组

两个常用的API：入队queue.push，出队queue.shift

实现一个餐厅叫号网页：

点击【取号】按钮生成一个号码
点击【叫号】按钮在屏幕上显示 “XXX号请就餐”
‘当前号码’ 后显示新生成的号码
‘当前队列’ 后显示正在排队的号码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>队列示例</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="screen"></div>
    <div class="actions">
      <button id="createNumber">取号</button>
      <button id="callNumber">叫号</button>
    </div>
    <div>当前号码 <span id="newNumber"></span></div>
    <div>当前队列 <span id="queue"></span></div>
    <script src="./main.js"></script>
  </body>
</html>

#screen {
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

const divScreen = document.querySelector("#screen");
const btnCreateNumber = document.querySelector("#createNumber");
const btnCallNumber = document.querySelector("#callNumber");
const spanNewNumber = document.querySelector("#newNumber");
const spanQueue = document.querySelector("#queue");

let n = 0;
let queue = [];

btnCreateNumber.onclick = () => {
  n += 1;
  queue.push(n);
  spanNewNumber.innerText = n;
  spanQueue.innerText = JSON.stringify(queue);
};
btnCallNumber.onclick = () => {
  if (queue.length === 0) {
    divScreen.innerText = "没有客人排队啦";
  } else {
    const m = queue.shift();
    spanQueue.innerText = JSON.stringify(queue);
    divScreen.innerText = `${m}号请就餐`;
  }
};