4. 队列（Queue）

• 队列是一种非常重要的数据结构，广泛应用于各种算法和实际问题中。
• 队列是一种先进先出（FIFO）的数据结构，在许多应用场景中都非常有用，例如任务调度、缓冲区管理等。

4. 队列（Queue）

示例场景：实现一个基本的队列，并提供入队、出队和显示队列内容的功能。

队列类实现

class Queue {
  constructor() {
    this.items = [];
  }

  enqueue(element) {
    this.items.push(element);
  }

  dequeue() {
    if (this.isEmpty()) {
      return "Underflow";
    }
    return this.items.shift();
  }

  front() {
    if (this.isEmpty()) {
      return "No elements in Queue";
    }
    return this.items[0];
  }

  isEmpty() {
    return this.items.length === 0;
  }

  printQueue() {
    let str = "";
    for (let i = 0; i < this.items.length; i++) {
      str += this.items[i] + " ";
    }
    return str;
  }

  size() {
    return this.items.length;
  }
}

React 组件实现

import React, { useState } from "react";

function QueueComponent() {
  const [queue, setQueue] = useState(new Queue());
  const [element, setElement] = useState("");
  const [queueContent, setQueueContent] = useState("");

  const handleEnqueue = () => {
    const elementInt = parseInt(element, 10);
    if (!isNaN(elementInt)) {
      queue.enqueue(elementInt);
      setElement("");
      updateQueueContent();
    }
  };

  const handleDequeue = () => {
    const dequeuedElement = queue.dequeue();
    if (dequeuedElement !== "Underflow") {
      updateQueueContent();
    }
  };

  const updateQueueContent = () => {
    setQueueContent(queue.printQueue());
  };

  return (
    <div>
      <h2>队列</h2>
      <input
        type="number"
        placeholder="元素"
        value={element}
        onChange={(e) => setElement(e.target.value)}
      />
      <button onClick={handleEnqueue}>入队</button>
      <button onClick={handleDequeue}>出队</button>
      <h3>队列内容</h3>
      <p>{queueContent}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>队列</h1>
      <QueueComponent />
    </div>
  );
}

export default App;

解释

1. 队列类实现：

   • enqueue(element): 将元素添加到队列的末尾。
   • dequeue(): 从队列的前端移除元素并返回它。如果队列为空，则返回 "Underflow"。
   • front(): 返回队列前端的元素。如果队列为空，则返回 "No elements in Queue"。
   • isEmpty(): 检查队列是否为空。
   • printQueue(): 返回队列内容的字符串表示。
   • size(): 返回队列的大小。

2. React 组件实现：

   • QueueComponent 组件包含一个队列实例 queue 和一个输入框 element。
   • handleEnqueue 处理入队操作，将输入的元素添加到队列中，并更新队列内容。
   • handleDequeue 处理出队操作，从队列中移除前端元素，并更新队列内容。
   • updateQueueContent 方法用于更新队列内容的显示。