数组04— JavaScript 队列

在上节，我们学习了 JavaScript 堆栈数据结构，并知道了如何将数组用作堆栈，错过的小伙伴可以点击文章《【JavaScript 教程】第六章 数组03— Stack ：使用 Array 的push()和pop()方法实现堆栈数据结构》进行学习。

那么，在今天的教程中，我们一起来学习队列数据结构以及如何使用 Array 类型的方法实现 JavaScript 队列。

Queue数据结构介绍

队列是元素的有序列表，其中一个元素插入到队列的末尾并从队列的前面删除。

与基于后进先出 (LIFO) 原则工作的堆栈不同，队列基于先进先出 (FIFO) 原则工作。

队列有两个主要操作，包括插入新元素和删除现有元素。

插入操作称为入队，移除操作称为出队。入队操作在队列的末尾插入一个元素，而出队操作从队列的前面删除一个元素。

队列的另一个重要操作是获取名为 peek 的最前面的元素。与dequeue操作不同，peek操作只是返回最前面的元素，不修改队列。

名称队列来自与银行客户队列的类比。先到的顾客会先得到服务，后到的顾客排在队列的末尾，然后得到服务。

使用数组实现 JavaScript 队列

您可以通过使用 Array 类型的两种方法将数组用作队列：

• 使用 push() 方法在数组末尾添加一个元素。这种方法相当于入队操作。

• 使用 shift() 方法从数组的前面删除一个元素。与出队操作相同。

让我们使用数组来实现一个 JavaScript 队列数据结构。

下面是队列的构造函数：

function Queue() {   this.elements = [];}

Queue() 构造函数使用一个数组来存储其元素。

enqueue() 方法在队列的末尾添加一个元素。我们使用数组对象的 push() 方法在队列末尾插入新元素。

Queue.prototype.enqueue = function (e) {   this.elements.push(e);};

dequeue() 方法从队列的前面移除一个元素。在 dequeue() 方法中，我们使用数组的 shift() 方法移除队列前面的元素。

// remove an element from the front of the queueQueue.prototype.dequeue = function () {    return this.elements.shift();};

isEmpty() 方法通过检查数组的length属性是否为零来检查队列是否为空。

// check if the queue is emptyQueue.prototype.isEmpty = function () {    return this.elements.length == 0;};

peek() 方法访问队列前面的元素而不修改它。

// get the element at the front of the queueQueue.prototype.peek = function () {    return !this.isEmpty() ? this.elements[0] : undefined;};

为了查询队列的长度，我们开发了 length() 方法：

Queue.prototype.length = function() {    return this.elements.length;}

要从 Queue() 构造函数创建新队列，请使用 new 关键字，如下所示：

let q = new Queue();

要将 1 到 7 的数字排入队列，请使用以下代码。

for (let i = 1; i <= 7; i++) {    q.enqueue(i);}

要获取队列前面的数字，请使用peek()方法。

// get the current item at the front of the queueconsole.log(q.peek()); // 1

要获取队列的当前长度，请使用 length() 方法，如下例所示。

// get the current length of queueconsole.log(q.length()); // 7

要删除队列前面的元素，请使用 dequeue() 方法，如下所示：

// dequeue all elementswhile (!q.isEmpty()) {    console.log(q.dequeue());}
//1//2//3//4//5//6//7

现在，您应该对队列数据结构有了很好的理解，并且知道如何使用 Array 类型的 push() 和 shift() 方法在 JavaScript 中实现队列。

今天的内容就到这里了。