肥晨开发的学习之路

函数用于解码 Base64 字符串，但它只能处理 ASCII 字符。如果字符串中包含非 ASCII 字符（如中文），解码结果就会变成乱码。JWT 是一种用于在网络应用之间安全传递信息的开放标准（RFC 7519）。部分包含了一些中文字符（如公司名称）。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；将 Base64Url 转换为标准的 Base64，并补充末尾的。中文字符在 JWT 中是使用 UTF-8 编码的，而。并不支持 UTF-8 解码，因此需要额外的处理。在我的项目中，JWT 的。

在 JavaScript 中，数组经常包含不同类型的数据，可能是数字、字符串或其他类型的元素。有时，我们需要从一个混合类型的数组中筛选出所有的数字元素。函数，我们可以轻松地从一个包含多种类型元素的数组中筛选出数字元素。该数组包含了几种类型的数据，包括数字字符串、普通字符串（如 ‘PROJECT’, ‘STATION’ 等）以及其他标识符。我们希望提取出所有数字字符串，并将其存入新的数组中。方法接受一个回调函数，对数组中的每个元素执行该回调。，我们希望过滤掉所有非数字的元素，仅保留数字内容。

函数内部引用了外部函数的变量，并且这个函数在外部被调用时依然能够访问这些外部变量。换句话说，闭包是一个“函数 + 词法作用域”的组合。

v标志增强了 JavaScript 正则表达式在处理 Unicode 和字符类操作方面的能力。通过 Unicode 属性转义和字符类集合操作，开发者可以更高效地处理各种文本数据。这使得正则表达式在现代应用中的应用变得更加灵活和强大。您好，我是肥晨。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。

在当前目录下的 node_modules 目录查找。向上级目录逐级查找，直至根目录。查找 package.json 中的 main 属性指定的入口文件。默认文件名查找（index.js、index.json、index.node）。以下是一个简单的自定义模块查找流程示意图：在这个示例中，如果要加载模块A，Node.js 会首先在当前目录下的中找到对应的模块文件或者中指定的入口文件。如果未找到，则向上逐级查找，直至根目录。在当前目录下的 node_modules 目录查找。

Map 的空间复杂度为 O(n)，其中 n 是 Map 中键值对的数量。因此，在选择使用 Map 时，需要考虑到随着键值对数量的增加，其内存使用也会相应增加。这一点在处理大量数据时尤为重要，需要权衡空间占用和数据结构的效率。

可以使用CSS的transition、transform和animation属性来创建动画效果，并使用JavaScript监听按钮的点击事件，以控制动画的播放和停止。监听开始按钮的点击事件，并使用JavaScript的定时器来实现倒计时功能，并在倒计时结束时触发指定的事件。监听按钮的点击事件，并根据用户点击的按钮来更新计算器的显示内容，并实现基本的运算逻辑。元素来实现音乐的播放功能，并使用JavaScript监听播放器的控制按钮的点击事件，以实现播放、暂停、停止、上一曲、下一曲等功能。行业内幕，洞察先机。

这个项目旨在通过使用HTML、CSS和JavaScript创建一个简单而功能丰富的个人博客网站。通过此项目，你将加深对前端开发技术的理解，并提升实际编程技能。

欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。

在复杂的应用程序中，随着组件之间的数据传递变得复杂，为了更有效地管理和控制数据流，可以采用状态管理工具来统一管理应用程序的状态。Redux 和 Vuex 是两种流行的状态管理工具，它们通过使用单一的存储库（store）来管理整个应用程序的状态，并通过派发（dispatch）动作（actions）来修改状态。当谈到JavaScript中的数据流时，我们通常指的是数据在应用程序中的传递和处理方式。在实时更新数据的场景中，可以使用 WebSocket 等实时通信技术来建立实时数据流，以确保数据的及时更新和同步。

JavaScript引擎主要由解析器（Parser）、解释器（Interpreter）、优化器（Optimizer）和垃圾回收器（Garbage Collector）等部分组成。JavaScript引擎的工作原理是一个复杂且精细的过程，涉及多个组件和阶段的协同工作。通过对引擎内部工作原理的深入了解，我们可以更好地优化代码、提高性能，并构建出更高效、更稳定的Web应用程序。

是一个比较传统且简单的用法，用于实现一些特定的功能，但在现代 web 开发中可以考虑使用更优雅的替代方案来防止页面跳转或执行空操作。是一个传统的用法，但在现代 web 开发中，开发者更倾向于使用语义化更好、可访问性更强的替代方案，以提高代码的清晰度和可维护性。有其特定的用途，但在实际开发中，应权衡其安全性、性能以及可维护性，并考虑使用更现代和安全的替代方案来达到相同的效果。考虑使用更安全的替代方案来实现相同的功能，比如在事件处理程序中返回 false 来阻止默认行为或页面跳转。行业内幕，洞察先机。

在处理网页上的图片资源或者其他类型的文件资源时，你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景：动态修改图片参数：如果你有一个图片URL，并且想要动态地改变它的查询参数（比如改变图片的尺寸、质量等），你可以使用URLSearchParams来修改URL，并重新加载图片。文件上传和下载处理：在处理文件上传或下载时，你可能需要获取文件名或文件扩展名来决定如何处理文件。例如，你可能需要根据文件类型来设置不同的处理逻辑或保存路径。

使用时间戳 1689302591000为案例，可以将其转换为可读的日期和时间格式。在 JavaScript 中，可以使用 Date 对象来进行时间戳的转换和格式化。根据提供的时间戳，转换后的日期为 2023 年 3 月 13 日，时间为 15:36:31。请注意，转换结果可能会因为时区等因素而有所差异。

这些是JavaScript ES8的一些主要特性。ES8还引入了一些其他小的语法和API改进，可以提供更好的开发体验和效率。

在处理一些高频触发的事件（如resize、scroll）时，使用节流（throttling）和防抖（debouncing）可以限制事件处理函数的执行频率，提高性能。对于涉及大量计算或耗时操作的任务，可以将其放入Web Worker中，在后台线程中运行，避免阻塞主线程，提高页面响应性能。将事件监听器绑定到父元素，利用事件冒泡机制来处理子元素的事件，可以减少事件处理函数的数量，提高性能。延迟加载非关键的资源（如图片、脚本等），在用户需要时再进行加载，减少页面初始加载时间，提高用户体验。

以下是JavaScript ES9引入的一些新特性。每个特性都有助于简化开发过程、提高代码效率，并提供更强大的功能。JavaScript ES9（也称为ES2018）

引入了新的Number.prototype.toFixed()方法，它允许指定小数点后的位数并将数字四舍五入为指定精度；flat()方法可将多维数组展平为一维数组，而flatMap()方法在展平数组的同时还可以对每个元素执行映射操作。这些是ES10中的一些主要特性。它接收一个键值对的可迭代对象（如数组）作为参数，并返回一个新的对象。现在可以在try-catch语句中省略catch块中的绑定，只使用catch {}，而不会将错误绑定到变量。引入了一种新的基本数据类型 BigInt，它可以表示任意精度的整数。

Promise.allSettled() 是一个新的 Promise API，它接收一个 Promise 数组，并在所有 Promise 完成后返回一个新的 Promise，该 Promise 的值是一个包含每个 Promise 状态和结果的对象数组。与逻辑或操作符 || 不同，空值合并操作符只有在变量值为 null 或 undefined 时才会返回默认值，其他 falsy 值（如空字符串、0 或 false）仍然会返回变量本身。返回的结果是一个数组，每个元素包含原始 Promise 的状态和值。

事件委托（Event delegation）是一种常见的事件处理模式，它利用冒泡机制将事件的处理交给父元素或更高层级的元素来管理，而不是直接将事件处理程序绑定到每个子元素。事件委托模式提供了一种灵活、松耦合的方式来处理事件和回调函数，使得代码结构清晰，可扩展性更强，并提供了多播事件的能力。动态绑定和增加灵活性：当新的子元素被添加到父元素中时，它们会自动继承来自父元素的事件处理程序，无需再次手动绑定事件。通过事件委托，你可以在父元素上监听事件，并根据事件发生的目标元素（子元素）来执行相应的操作。

循环链表是一种特殊的链表数据结构，其中最后一个节点指向链表的头节点，形成一个循环的环状结构。创建链表节点对象，通过赋值和指针操作来构建循环链表，并确保最后一个节点的指针指向头节点，形成循环。需要额外指针：与普通链表相比，循环链表需要额外的指针来记录链表的尾节点（即最后一个节点）或提供便捷访问的起点节点。在 JavaScript 中，循环链表是一种特殊的链表结构，其中最后一个节点指向头节点，形成一个循环。循环链表是一种链表的变体，其中链表中的最后一个节点指向链表的头节点，形成一个循环或环状结构。

也就是说浏览器一开始会加载它必需的thml、css和js 之后所有的交互操作都在一个页面上完成 这些都是由JavaScript动态的加载合适的内容来响应用户的操作 所以Web单页应用会包含大量的js代码 支持单个页面上与多个组件进行丰富的交互。单页面应用（Single Page Application，SPA）是一种网页应用程序模型，它在加载初始页面后，通过动态地更新页面的部分内容，实现与用户的交互和数据展示，而无需重新加载整个页面。有了单页面应用，才把以前的传统web开发叫作多页面应用。

这些是ES12中的一些重要的新特性，它们提供了更多的功能和语法糖，使开发者能够更加高效地编写现代化的JavaScript代码。然而，需要注意的是，不同浏览器和 JavaScript 运行环境对ES12的支持程度可能会有所不同，请在目标平台上进行兼容性测试或使用Babel等工具进行转译，以确保代码的稳定运行。JavaScript ES12（也称为ECMAScript 2022）是JavaScript的最新版本，它引入了一些新的特性和语言功能，以提供更好的开发体验和更强大的编程能力。

前端架构是指在前端开发中，设计和组织应用程序的基本结构和组件之间的关系的方法和原则。它涉及到如何组织代码、管理数据、处理业务逻辑以及实现用户界面等方面。一个好的前端架构能够提高开发效率、代码可维护性和项目的可扩展性。以下是一些常见的前端架构模式：MVC（Model-View-Controller）：MVC 是一种将应用程序分为模型（Model）、视图（View）和控制器（Controller）三个部分的架构模式。模型负责处理数据逻辑，视图负责呈现用户界面，而控制器负责接受用户输入并处理业务逻辑。

Object.keys()和Object.getOwnPropertyNames()方法只会返回对象自身的属性（包括可枚举和不可枚举属性），而不会返回继承的属性。我们可以使用forEach()方法来遍历这个数组，并对每个属性进行操作。Object.entries(obj)会返回一个包含对象自身可枚举属性的键值对数组。我们可以使用forEach()方法来遍历这个数组，并对每个属性进行操作。对象的属性在内部存储时是没有固定顺序的，因此遍历顺序不一定与属性定义的顺序相同。

链表是多个元素组成的列表，元素存储不连续，用next指针连接到一起，JS中没有链表，但是可以用Object模拟链表。

同源策略在处理跨域访问时具有严格性，一旦违反同源策略，浏览器会阻止跨域操作，包括对 DOM 的访问、Ajax 请求和共享资源等。如果不受同源策略的限制，攻击者可以在一个受信任的网站上注入恶意脚本，从而获取用户的敏感信息、篡改页面内容或进行其他恶意行为。同源策略是浏览器为了保护用户安全而采取的一项安全措施，限制了不同源下文档或脚本之间的交互操作，但通过一些例外机制如 CORS，可以实现有限的跨域资源共享。同源策略是指浏览器的一种安全机制，用于限制来自不同源（即域、协议或端口）的文档或脚本之间的交互操作。

引入 Vue.js 库：在 HTML 文件中引入 Vue.js 库，可以通过 CDN 引入或使用本地文件。创建根组件：在 JavaScript 文件中创建一个根组件，并实例化一个 Vue 对象。这个根组件会包含整个应用程序的其他组件。配置根组件选项：在创建根组件时，可以配置一些选项，例如 el（指定挂载的元素）、data（数据对象）和 methods（方法对象）等。定义子组件：根组件可以包含多个子组件，每个子组件都可以通过 Vue.component() 来定义。挂载根组件。

可以通过编程式导航或声明式导航的方式，根据具体的需求，在不同的组件之间切换路由。当用户切换路由时，Vue 路由会监听 URL 的 hashchange 事件，一旦 URL 的哈希部分发生变化，它就会根据新的哈希值找到对应的路由配置，并动态地加载所需的组件并更新页面内容，形成页面无刷新的效果。所以，在使用 Hash 模式时，每次切换路由都会修改 URL 的哈希部分，而不会改变实际的 URL 路径，因此刷新页面或直接访问某个子路由时，需要保证服务器能正确响应前端路由请求，返回正确的页面内容。

当我们在浏览器中打开新标签时，就会创建一个任务队列。这是因为每个标签都是单线程处理所有的任务，它被称为事件循环。浏览器要负责多个任务，如渲染HTML，执行JavaScript代码，处理用户交互（用户输入、鼠标点击等），执行和处理异步请求。队列(Queue)是一种具有先进先出(FIFO, First-In-First-Out)特性的数据结构，它可以用于在计算机程序中管理和存储元素。在JavaScript中，可以使用数组(Array)或链表(Linked List)等数据结构来实现队列。

栈是一种遵从后进先出（LIFO）原则的有序集合。新添加的或待删除的元素都保存在栈的同一端，称作栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。注：LIFO：last in first out。

【代码】经典JavaScript手写面试题和答案。

iOS系统上不支持yyyy-mm-dd的时间格式，需要将 - 替换为 / 即yyyy/mm/dd。js时间处理new Date()在安卓手机正常显示，但是在苹果手机就不显示。在浏览器和安卓Android上都正常显示，在苹果iOS上则无法显示。在iOS上处理日期时需要将 - 替换为 /，用正则表达式处理。yyyy-mm-dd格式的日期在ios上的返回值是NaN。mac/苹果上面js对比（运算）失效怎么处理？ios使用js日期函数处理时的问题。在其他设备上 都没有问题。

其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。

主要内容为下面几大类：移动端、图片、JavaScript、css、html、页面内容、服务器、cookie。

把C装满时装入A和B的水也是C，A和B剩余要装的水量是A+B-C，尽量平均地分配在A和B两个杯子中，所以剩余的时间就是(A+B-C)/2。c是最大数量水杯，并且大于a+b，那么最佳策略当然是A和B分别和C一起灌水，最后C剩余的部分再单独装。每秒钟，可以装满 2 杯 不同 类型的水或者 1 杯任意类型的水。如果相差的并没有这么大，要尽量保证A和B剩余的容积尽可能相同，这样的话，我们就可以在装满C之后，同时装A和B。如果c

在vue中，为确保用户登录，使用路由拦截器或者路由守卫判断登录状态，并判断和处理情况。路由守卫是什么？官方文档的解释是：可以用router.beforeEach注册一个路由守卫const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})注:这是一个全...

在ECMAScript中，有3个关键字可以用于声明变量。分别是：var、let和const。其中，var在所有ECMAScript都是可以使用的，但是let和const需要在ECMAScript6及其以上版本才可以使用。let和const的行为基本一致，但是其中有一个比较重要的一个区别，就是const用它声明变量时必须同时初始化变量，且尝试修改const声明的变量会导致运行错误。所以常有人直接...

防抖：定义：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。存在的意义：如果事件处理函数调用的频率无限制，会加重浏览器的负担，浏览器的性能是有限的，导致用户体验非常糟糕。需要减少调用频率，同时又不影响实际效果。实现效果：如果短时间内大量触发同一事件，只会执行一次函数。如何实现：利用setTimeout()...

原理：找出不使用的变量，释放内存。JavaScript是使用垃圾回收的语言，也就是很大的解决了跟踪内存对开发者造成的负担(毕竟这是很多问题的来源)。而卸下这个甜蜜的负担(一点也不甜蜜好嘛)，通过自动内存管理实现内存分配和闲置资源回收。(下面会简单的讲述内存泄漏)如果不用垃圾回收机制会造成什么后果？1.会消耗掉所有的可用内存(内存占用)，造成系统崩溃2.内存泄漏可达性：一个地方到另一个地...