JS队列|极客笔记

JS队列

在 JavaScript 中，队列（Queue）是一种先进先出（FIFO）的数据结构，即最先进入队列的元素最先被取出。在实际开发中，队列通常用于处理需要按照先后顺序执行的操作，比如事件处理、定时器等场景。

创建队列

在 JavaScript 中，可以通过数组来模拟队列的功能。我们可以利用数组的 push() 方法向队列尾部添加元素，利用 shift() 方法从队列头部取出元素。下面是一个简单的队列实现：

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

    // 入队
    enqueue(element) {
        this.queue.push(element);
    }

    // 出队
    dequeue() {
        return this.queue.shift();
    }

    // 返回队首元素
    front() {
        return this.queue[0];
    }

    // 返回队列大小
    size() {
        return this.queue.length;
    }

    // 判断队列是否为空
    isEmpty() {
        return this.queue.length === 0;
    }
}

使用队列

创建了队列类之后，我们可以实例化一个队列对象，并使用其各种方法操作队列元素。下面是一个简单的示例：

// 实例化一个队列对象
const queue = new Queue();

// 向队列中添加元素
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);

// 打印队列大小
console.log(queue.size()); // Output: 3

// 打印队首元素
console.log(queue.front()); // Output: 1

// 出队
console.log(queue.dequeue()); // Output: 1

// 再次打印队首元素
console.log(queue.front()); // Output: 2

// 判断队列是否为空
console.log(queue.isEmpty()); // Output: false

队列应用

队列在实际开发中有许多应用场景，下面介绍其中一些常见的应用：

1. 事件队列

在前端开发中，事件队列是非常常见的应用场景。比如用户点击按钮、输入框输入文字等操作都可以被封装成事件并依次加入到事件队列中，按照顺序执行。

// 创建一个事件队列
const eventQueue = new Queue();

// 模拟用户点击事件
eventQueue.enqueue("Click Button 1");
eventQueue.enqueue("Click Button 2");
eventQueue.enqueue("Click Button 3");

// 依次执行事件
while (!eventQueue.isEmpty()) {
    const event = eventQueue.dequeue();
    console.log(event);
}

2. 异步任务队列

在前端开发中，异步任务队列也是常见的应用场景。比如通过 setTimeout 或 Promise 来处理异步操作，可以将这些异步任务按照顺序加入队列中执行。

// 创建一个异步任务队列
const asyncQueue = new Queue();

// 模拟异步任务
asyncQueue.enqueue(new Promise(resolve => {
    setTimeout(() => {
        resolve("Async Task 1");
    }, 2000);
}));
asyncQueue.enqueue(new Promise(resolve => {
    setTimeout(() => {
        resolve("Async Task 2");
    }, 1000);
}));
asyncQueue.enqueue(new Promise(resolve => {
    setTimeout(() => {
        resolve("Async Task 3");
    }, 1500);
}));

// 依次执行异步任务
async function executeAsyncTask() {
    while (!asyncQueue.isEmpty()) {
        const asyncTask = await asyncQueue.dequeue();
        const result = await asyncTask;
        console.log(result);
    }
}

executeAsyncTask();

3. 缓存队列

在开发中，缓存队列也是一个常见的应用场景。比如需要对一些数据进行处理并缓存，可以将这些数据按先后顺序加入到缓存队列中进行处理。

// 创建一个缓存队列
const cacheQueue = new Queue();

// 模拟数据处理并缓存
cacheQueue.enqueue({ data: "Data 1", processed: false });
cacheQueue.enqueue({ data: "Data 2", processed: false });
cacheQueue.enqueue({ data: "Data 3", processed: false });

// 处理数据并缓存
while (!cacheQueue.isEmpty()) {
    const cacheData = cacheQueue.dequeue();
    cacheData.processed = true;
    console.log(cacheData);
}