【JavaScript 教程】第六章 数组04— JavaScript 队列

英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

在上节，我们学习了 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 queue
Queue.prototype.dequeue = function () {
    return this.elements.shift();
};

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

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

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

// get the element at the front of the queue
Queue.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 queue
console.log(q.peek()); // 1

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

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

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

// dequeue all elements
while (!q.isEmpty()) {
    console.log(q.dequeue());
}


//1
//2
//3
//4
//5
//6
//7

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

今天的内容就到这里了。

如果您还想学习前面的内容，请点击下文链接进行学习。

【JavaScript 教程】第六章 数组03— Stack ：使用 Array 的push()和pop()方法实现堆栈数据结构

【JavaScript 教程】第六章 数组02— Array Length：如何有效地使用数组的长度属性

【JavaScript 教程】第六章 数组01— 介绍JavaScript中的Array类型

【JavaScript 教程】第五章 字符串11— includes()：检查字符串是否包含子字符串

【JavaScript 教程】第五章 字符串10— slice()：提取字符串的一部分

【JavaScript 教程】第五章 字符串09— substring()：从字符串中提取子字符串

【JavaScript 教程】第五章 字符串08— lastIndexOf()：查找字符串中子字符串最后一次出现的索引

【JavaScript 教程】第五章 字符串07— indexOf()：获取字符串中子字符串第一次出现的索引

【JavaScript 教程】第五章 字符串06— split()：将字符串拆分为子字符串数组

【JavaScript 教程】第五章 字符串05— concat()：将多个字符串连接成一个新字符串

【JavaScript 教程】第五章 字符串04— padStart() 和 padEnd()

【JavaScript 教程】第五章 字符串03— trim()、trimStart() 和 trimEnd()

【JavaScript 教程】第五章 字符串02— 字符串类型

【JavaScript 教程】第五章 字符串01— JavaScript 字符串

学习更多技能

请点击下方公众号