JavaScript数据结构yocto queue队列链表代码分析

 更新时间:2022年12月19日 16:47:51   作者:codeniu  
这篇文章主要为大家介绍了JavaScript数据结构yocto queue队列链表代码分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

Yocto-queue 是一种允许高效存储和检索数据的数据结构。它是一种队列类型,是一个元素集合,其中的项被添加到一端并从另一端移除。

它被设计用来操作数据量很大的数组,在你需要使用大量的 Array.pushArray.shift 操作时,Yocto-queue 有更好的性能表现。

仓库地址:sindresorhus/yocto-queue: Tiny queue data structure (github.com)

准备工作

在浏览器中调试代码虽然说很方便但是多多少少看着有点不专业,我们还是使用 Github Workspace,不同的是这次是在本地的vscode中使用。

我们打开 yocto-queue 仓库,创建一个Github Codespace,回到 Github 首页,在导航栏选中 Workspace ,找到你刚创建的项目,选择使用 vscode打开,如图:

vscode 会提示安装Githbu Workspace 插件,实际上它跟 Remote SHH 插件的功能差不多,为我们在远程服务器上开发提供了一种可能,这么做的好处有,跨平台,多端操作,环境统一等。

分析代码

源码如下:

/*
How it works:
`this.#head` is an instance of `Node` which keeps track of its current value and nests another instance of `Node` that keeps the value that comes after it. When a value is provided to `.enqueue()`, the code needs to iterate through `this.#head`, going deeper and deeper to find the last value. However, iterating through every single item is slow. This problem is solved by saving a reference to the last value as `this.#tail` so that it can reference it to add a new value.
*/
class Node {
	value;
	next;
	constructor(value) {
		this.value = value;
	}
}
export default class Queue {
	#head;
	#tail;
	#size;
	constructor() {
		this.clear();
	}
	enqueue(value) {
		const node = new Node(value);
		if (this.#head) {
			this.#tail.next = node;
			this.#tail = node;
		} else {
			this.#head = node;
			this.#tail = node;
		}
		this.#size++;
	}
	dequeue() {
		const current = this.#head;
		if (!current) {
			return;
		}
		this.#head = this.#head.next;
		this.#size--;
		return current.value;
	}
	clear() {
		this.#head = undefined;
		this.#tail = undefined;
		this.#size = 0;
	}
	get size() {
		return this.#size;
	}
	* [Symbol.iterator]() {
		let current = this.#head;
		while (current) {
			yield current.value;
			current = current.next;
		}
	}
}

队列

队列是一种先进先出(FIFO)的数据结构,具有以下几个特点:

  • 新元素总是添加到队列的末尾。
  • 已经在队列中的元素保持原有的顺序不变。
  • 任何时候,只能从队列的开头(顶部)删除元素。

入队

	enqueue(value) {
		const node = new Node(value);
		if (this.#head) {
			this.#tail.next = node;
			this.#tail = node;
		} else {
			this.#head = node;
			this.#tail = node;
		}
		this.#size++;
	}

向队列中添加值。该方法需要一个值作为参数,它用来创建一个新的 Node 对象。

如果队列中已经有一个 head 和 tail 节点,新节点将会添加到队列末尾,通过将 tail 节点的 next 属性设置为新节点,并更新 tail 属性为新节点。

如果队列为空,新节点将成为 head 和 tail 节点。最后,队列的 size 属性会增加以反映新添加的节点。

出队

从队列中删除顶部节点的值,并将其返回。

	dequeue() {
		const current = this.#head;
		if (!current) {
			return;
		}
		this.#head = this.#head.next;
		this.#size--;
		return current.value;
	}

它首先通过检查 head 属性是否为空来检查队列是否为空。如果队列为空,该方法返回 null。如果队列不为空,head 属性将更新为队列中的下一个节点,并且 size 属性减少以反映删除的节点。然后返回原 head 节点的值。

迭代器

允许在 for...of 循环中使用 yocto-queue.

	* [Symbol.iterator]() {
		let current = this.#head;
		while (current) {
			yield current.value;
			current = current.next;
		}
	}

使用 Symbol.iterator 符号来为队列定义一个自定义迭代器。迭代器首先将 current 变量设置为队列的 head 属性。然后进入一个循环,只要 current 不为 null 就继续循环。每次迭代,都会使用 yield 关键字产生 current 节点的 value 属性。然后 current 变量将更新为队列中的下一个节点,循环继续。这样 for...of 循环就可以遍历队列中的所有值。

总结

通过阅读yocto-queue的源码,学习到了队列的实现方式,以及迭代器的使用。数组 以及 队列两种数据结构在使用场景上的异同,数组是查询快,插入慢,队列是查询慢,插入快。

以上就是JavaScript数据结构yocto queue队列链表代码分析的详细内容,更多关于JavaScript yocto queue队列链表的资料请关注脚本之家其它相关文章!

相关文章

  • BootStrap的两种模态框方式

    BootStrap的两种模态框方式

    bootstrap弹出层有多种触发方式,以下是我用到的bootstrap的两种模态框方式,需要的的朋友参考下吧
    2017-05-05
  • JavaScript实现图片缩放功能

    JavaScript实现图片缩放功能

    本文,我们来讲讲如何使用 JavaScript 实现图片的缩放,当然,我们可以类比到其他的元素,比如视频的缩放,文中有详细的代码示例,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-07-07
  • javaScript让文本框内的最后一个文字的后面获得焦点实现代码

    javaScript让文本框内的最后一个文字的后面获得焦点实现代码

    让文本框内的最后一个文字的后面获得焦点,在应用中很常见,接下来提供解决方案,按兴趣的朋友可以了解下
    2013-01-01
  • JavaScript oncopy事件用法实例解析

    JavaScript oncopy事件用法实例解析

    这篇文章主要介绍了JavaScript oncopy事件用法实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 有趣的JavaScript数组长度问题代码说明

    有趣的JavaScript数组长度问题代码说明

    有趣的JavaScript数组代码示例,学习js的朋友可以参考下。注意以下的情况。
    2011-01-01
  • Javascript中eval函数的详细用法与说明

    Javascript中eval函数的详细用法与说明

    Javascript中eval函数的详细用法与说明...
    2007-03-03
  • 一文彻底理解JS回调函数

    一文彻底理解JS回调函数

    回调函数是从一个叫函数式编程的编程范式中衍生出来的概念,简单来说,函数式编程就是使用函数作为变量,这篇文章主要介绍了一文彻底理解JS回调函数,需要的朋友可以参考下
    2022-12-12
  • Dom加载让图片加载完再执行的脚本代码

    Dom加载让图片加载完再执行的脚本代码

    当大家使用window.onload执行一个函数时,必须要等到页面上的图片等信息全部加载完毕之后才执行的。但很多时候图片的数量比较多,所以需要很多时间下载。更令人尴尬的是,当网页文档(或者说Dom)已经加载完毕,而图片尚未加载完毕,很多用户已经开始浏览网页,但这时很多由window.onload所触发的函数不能执行,这就导致一部分功能不能完美地给用户使用,更严重的是会给用户留下不好的印象!
    2008-05-05
  • 解决layui数据表格table的横向滚动条显示问题

    解决layui数据表格table的横向滚动条显示问题

    今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript技巧44招【实用】

    JavaScript技巧44招【实用】

    JavaScript是一个绝冠全球的编程语言,可用于Web开发、移动应用开发(PhoneGap、Appcelerator)、服务器端开发(Node.js和Wakanda)等等。本文主要介绍JavaScript应用的一些小技巧。
    2016-12-12

最新评论