Hi_MrXiao的博客

在 JavaScript 中，Map 是 ES6 引入的一种新的数据结构，它类似于对象，也是键值对的集合，但 Map 的键可以是任意类型的值（对象、函数、基本类型等），而传统对象的键只能是字符串或 Symbol，并且Map保留了插入顺序。

下面这段精心整理的内容，呈现了一系列丰富多样的练习题集，它们专注于JavaScript编程语言的两个核心方面——语法和特性。这些练习题旨在帮助学习者系统地巩固基础知识，并在实践中不断提升他们的JavaScript编程技能，从而为进一步探索和运用这门强大的编程语言奠定坚实的基础。

在 JavaScript 中，Set 是 ES6 引入的一个新数据结构，它允许我们存储一组唯一的值。这使得 Set 成为许多场景下的理想选择，特别是当我们需要对数组进行去重操作时经常被提起和使用。

要求数组中的每个元素向右“移动”指定的次数。比如，给定 [1, 2, 3, 4, 5]，右移 2 次后数组应变成 [4, 5, 1, 2, 3]描述：给定一个数组以及一个目标值，需要从该数组中找出所有两数之和等于目标值的数对，并以二维数组的形式输出这些符合条件的数对。描述：素数是指大于1的自然数，除了1和它本身外，不能被其他自然数整除的数。例如[1, [2, [3, 4]]]转为[1, 2, 3, 4]‌。描述：取交集的意思是找出两个数组中都存在的元素，并且确保最终结果中的每个元素都是唯一的。

在Web开发的过程中，合理且巧妙地运用console方法，就如同为我们的开发之旅点亮了一盏明灯，能让我们在复杂多变的代码世界中拥有更好的调试体验。通过充分利用console提供的各种功能，我们能够更加深入、细致地观察程序的运行状态，及时发现并解决潜在的问题，从而提升开发效率，优化代码质量，为打造更加优质、稳定的Web应用奠定坚实的基础。

如果l1是null（即空链表），那么函数直接返回l2。空间复杂度：O(M + N)，在最坏的情况下（当链表完全不平衡时），因为递归调用栈的深度可能达到M + N。时间复杂度：O(M + N)，每个节点都只被访问一次，并且每次递归调用都会处理一个节点。使⽤递归的方式来实现，将两个链表头部较⼩的⼀个与剩下的元素合并，并返回排好序的链表。比较l1和l2当前节点的值（l1.val和l2.val）。同样，如果l2是null，函数返回l1。头，当两条链表中的⼀条为空时终⽌递归。M、N 是两条链表 l1、l2 的⻓度。

链表作为一种基础且重要的线性数据结构，在数据处理领域发挥着独特作用，尤其在应对频繁的插入与删除操作时展现出显著优势。深入了解并熟练掌握链表的基本操作以及更为复杂的进阶操作，能够为解决各类实际问题提供有力的支持。

数据结构：数据的组织形式，如数组、链表、树、图等，用于高效存储和访问数据算法：解决问题的步骤，是指令的有限序列，其中每条指令表示一个或多个操作。它具备有穷性（有限步骤内完成）、确定性（每一步都有确切含义）、可行性（能通过有限次操作实现）等基本特性数据结构为算法提供了操作的对象和基础，而算法则通过操作这些数据结构中的数据来实现特定的功能和性能要求

js数组去重的方法1、for嵌套for，使用splice删除原数组重复的元素2、indexOf方法去重，返回新数组3、includes方法去重，返回新数组4、利用对象key属性唯一的特性去重4、利用ES6中的Set去重1、for嵌套for，使用splice删除原数组重复的元素 function deleteRepetition(arr){ for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j <

【代码】js常用快捷封装方法utils工具。

var str = "acfdskffdssfaf"var obj = {}for (let i = 0; i < str.length; i++) { if (obj[str[i]]) { obj[str[i]]++ } else { obj[str[i]] = 1 }}console.log(obj)var maxNum = 0, maxStr = str[0]for (const item in obj) { if (o

JavaScrip是单线程的，也就意味着同一时间只能处理一件事，如果其中一件事运行非常耗时，就会阻塞线程，事件循环机制就是解决这件事的

很多时候我们与后台的交互数据需要保证安全性，这个时候就需要将传给后台的数据进行加密，这里我们使用node.forge.js进行加密传输。：Node-forge可以在多种环境中使用，包括服务器端（如Node.js）和客户端（如浏览器中的JavaScript）。：Node-forge提供了清晰的接口文档和丰富的示例代码，使得开发者即使没有深厚的加密知识背景也能够快速上手和使用这些加密技术。：例如，它支持公钥和私钥的生成，以及基于这些密钥的加密和签名操作。或者使用 npm i node-forge -s 安装。

流程：首先是生成二维码，二维码对应的 url 中包含一个回调地址，在用户同意授权之后，将会在你的回调 url 上拼接参数 code 并且跳转，跳转之后前端从 url 中获取 code，调用接口发送给后端，后端用 code 去获取所需要的信息即可二维码效果扫码页码用户授权确认后，会跳转到之前redirect_uri属性写的链接，且带着code值。在跳转之后前端从 url 中获取 code，调用接口发送给后端，后端用 code 去获取所需要的信息即可。

冒泡排序：通过相邻元素的比较和交换，使得每一趟循环都能找到未有序数组的最大值或最小值。

而为了后续的一些针对列表的操作，例如直接查看第666行的数据，就需要对这行的数据有清楚的定位信息，且确保跳转后再次上下滚动加载不会导致出现问题（白屏情况），所以需要实时更新之前的布局信息以供这种操作。加载成功后就需要设置滚动条，为了后面滚动加载其他的内容，我们使用padding撑开盒子的高度，而padding的值就根据缓存的rowPosList每一元素的布局信息来设置。根据需要加载的开始位置和结束位置，加载虚拟滚动页面的内容，默认加载从第一行开始的数据。，即滚动列表时，动态改变可视区域内的渲染内容。

以上这些JavaScript案例涵盖动态效果、交互功能等等，便于提升用户体验，为开发者提供学习资源。同时在实际项目中扩展和优化，能助力网页设计更上一层楼。

在Web开发中，图片压缩是一个常见的需求。随着高清图片和多媒体内容的普及，平衡图片质量与文件大小对提升网页加载速度和优化用户体验至关重要。这里我们使用插件进行图片压缩。

在 Vue CLI 2 中，需要安装 dotenv 包来加载和使用环境变量。：首先安装 dotenv 包：在项目的根目录下创建一个 .env 文件，并在其中定义你的环境变量。：现在你可以在代码中使用 process.env.YOUR_ENV_VAR 来访问你在 .env 文件中定义的环境变量。

3、解析pdf，获取pdf所有页数据，使用canvas渲染，并使用TextLayerBuilder创建文本层，可以复制文本信息。在这里就是因为微任务导致，所以我们这里渲染pdf任务可以每次渲染完一页后等待一定时间才执行下一页的渲染，空出时间给主线程。在渲染pdf数据时，当pdf文件很大渲染量很多时，会导致页面卡住，无法执行其他操作；在滚动时当前是第几页的页码同步更新展示：需要在渲染每页pdf时将每页的高度存起来，以及每页滚动的临界值。在滚动时，根据当前滚动距离和每页滚动的临界距离相比较，判断当前是第几页。

初始鼠标位置距离图片左侧的left、top和宽高的比例，与图片放大后的比例相同计算方式，主要是知道放大后鼠标的位置和放大前鼠标的位置，相减得到偏移的距离，使用transform：translate移动就行。在这个基础上不管是缩小还是放大，都需要把上一次translate对应坐标的值 - 这次得到的值

使用HTML5属性 (naturalWidth, naturalHeight）和Image对象获取图片原始宽高

鼠标移动到需要放大的网页上时，鼠标静止不动500毫秒后，一个长方形的放大镜框显示，放大镜中显示当前区域2.2倍的效果，并且这时候鼠标移动放大的区域也跟着变化。放大镜限制：放大镜只能在特定的区域内使用，即放大镜的移动范围有边界。

js根据坐标进行图片截图

【代码】js 复制指定元素内的文本信息到剪切板。

问题复现const reg = /\.png$/igconst arr = ['1.png','2.png', '3.png']arr.forEach(i=>{ console.log('匹配结果：'+reg.test(i))})结果会是这样很明显，和预期的结果不一致，结果应该都是true产生原因在正则表达式使用了表示全局检索的 “g” 标志时，正则的lastIndex属性会记录上一次的匹配字符的index+1(lastIndex)，下一次匹配时就会从lastIndex处为