Dontla的博客

方法是否阻塞可读性推荐程度setTimeout否一般⭐⭐Promise +await否高⭐⭐⭐⭐whilebusy loop是差❌ 禁止使用JavaScript 虽然没有原生的sleep()函数，但通过异步机制，我们依然可以实现优雅、非阻塞的“睡眠”。记住一句话：JS 的 sleep，不是“让线程睡觉”，而是“让任务等待”。

简单来说，解构赋值就是按照一定的模式，从数组或对象中提取值，然后将它们赋值给变量。// 数组解构// 10// 20// 对象解构// Alice// 25解构赋值更加简洁明了。特性数组解构对象解构匹配依据位置顺序属性名支持默认值✅✅支持嵌套✅✅支持重命名❌✅解构赋值不仅让代码更简洁，还能大大提升可读性与可维护性。无论在日常开发还是函数设计中，灵活使用解构语法都能让你的 JavaScript 代码更加优雅！✍️结语。

在前端开发中，定时器（Timer）是非常常用的功能之一。无论是轮询接口、执行动画、还是延迟某个动作的触发，都离不开它。：延迟执行一次。：按固定间隔重复执行。TypeScript 也支持它们，只不过在类型定义上稍有区别。}, 1000);方法作用清理方式注意事项延迟执行一次清除后变量不会自动变null固定间隔重复执行同上useEffect启动/清理定时器返回清理函数组件卸载时清理Hook封装可复用逻辑自动清理代码更简洁。

IIFE是的缩写，意思是“立即执行的函数表达式顾名思义，它定义完就立刻执行，不需要再单独调用。");})();这段代码定义了一个匿名函数，然后立刻执行它。在函数外层加上一对小括号()，告诉 JavaScript 引擎：“这是一个表达式，不是普通函数声明。");}();就会报错，因为单独的function开头在语法上是函数声明，声明不能直接调用。加上括号，就变成了表达式形式，可以立即执行。IIFE 是一种定义并立即执行的函数表达式。

优点描述✅ 多浏览器支持一套代码适配三大主流内核⚡ 自动等待无需频繁写🧩 内置测试框架一步到位的 E2E 测试解决方案🕵️ 数据抓取能力强结合无头模式可实现高效爬取🧠 现代APITypeScript 支持优秀，语法直观无论你是想写自动化测试脚本化操作还是爬虫项目，Playwright 都是一个功能强大且现代化的选择。💡 如果你正在学习前端自动化测试、数据采集，Playwright 将是你最值得掌握的利器！

可选链操作符?是一种用于安全访问嵌套对象属性的语法糖。它允许我们在访问深层嵌套属性时，如果链中的某个引用为null或undefined，则整个表达式会短路返回undefined，而不会抛出错误。可选链操作符?是 JavaScript 中一个非常实用的特性，它让处理嵌套对象和可能为nullundefined的数据结构变得简单而优雅。在处理 API 数据、用户输入或任何不确定结构时，它都能显著提高代码的健壮性和可读性。随着现代 JavaScript 的发展，可选链操作符已成为前端开发中不可或缺的工具。

不是所有页面都用相同的代码，而是使用相同的页面结构处理不同数据动态路由的意义：用一个文件处理无限可能的URL路径，避免创建大量重复文件实际应用：在真实项目中，项目ID是动态生成的，不可能预先创建所有文件所以，不是"所有页面都一样"，而是"同一个页面文件根据URL参数动态渲染不同内容"，这是Next.js动态路由的核心价值所在。

React是由Facebook的软件工程师Jordan Walke创建的JavaScript库，于2011年部署于Facebook的newsfeed，2012年部署于Instagram，2013年5月正式开源。React专注于构建用户界面（UI），是MVC框架中的"V"（视图层），而非完整的MVC框架。React的核心理念是"从UI出发，抽象出不同的组件，继而将它们拼装起来"，这顺应了Web开发组件化的趋势。

【代码】React何时用函数组件（Hooks），何时用类组件？（错误边界用类组件Error Boundary）

{

特性export导出数量多个仅1个导出语法需要指定名称不需要指定名称导入语法需要{}并指定名称不需要{}，可以任意命名文件中使用次数可以多次仅能一次适用场景导出多个相关功能导出一个主要功能在实际开发中，如果模块提供多个功能，使用export更合适；如果模块专注于单一功能，使用更合适。

Yarn不是npm的替代品，而是npm的改进版，它保留了npm的核心功能，同时在速度、安全性和可靠性方面进行了优化。对于大多数JavaScript开发者来说，Yarn是一个更高效、更可靠的包管理选择，但npm仍然是Node.js生态系统中的基础工具。如果你已经使用npm，迁移到Yarn非常简单，而且可以立即获得更好的性能和体验。

Yarn是一个快速、可靠、安全的依赖管理工具，用于管理JavaScript项目的依赖。它由Facebook、Google、Exponent和Tilde共同开发，旨在解决npm在依赖管理方面存在的问题。安装速度更快依赖管理更加一致支持并行安装有更安全的依赖解析机制提供更好的错误信息Yarn作为现代JavaScript项目依赖管理的首选工具，提供了比npm更高效、更可靠的依赖管理体验。通过掌握以上命令，你可以更高效地管理项目依赖，提高开发效率。

在React中，数据只能从父组件流向子组件，不能反向流动。数据流向：父组件通过props将数据传递给子组件数据更新：如果子组件需要更新数据，它必须通过回调函数将更新请求"发送"给父组件父组件处理：父组件收到请求后更新自身状态，然后将新数据作为props传递回子组件React不是"没有双向绑定"，而是不提供自动的双向绑定机制，而是要求开发者显式地管理状态更新。这是一种设计选择，让数据流更加清晰，减少了意外状态变更的可能性，使应用更易于调试和维护。这正是React与Vue等框架在数据流处理上的核心区别。

单页应用(SPA)特点单页应用(SPA)多页应用(MPA)优点1. 交互体验好，切换流畅2. 前后端分离，开发效率高3. 减轻服务器压力1. SEO友好2. 初次加载快3. 兼容性好，不依赖前端JS缺点1. 首次加载慢2. 不利于SEO3. 页面复杂度高1. 用户体验较差2. 维护复杂3. 操作繁琐。

是一个基于。

TypeScript 支持。

/ x = 15。

JSX（JavaScript XML）是Facebook开发的一种JavaScript语法扩展，它允许在JavaScript代码中编写类似HTML的标记语言。作为React生态系统的核心组成部分，JSX为开发者提供了一种更直观、更声明式的方式来描述用户界面。JSX本质上是一种语法糖，它将类HTML的语法转换为JavaScript函数调用。当编写JSX代码时，实际上是在创建React元素的描述，这些描述最终会被转换为虚拟DOM。

React等框架适合复杂应用和大型团队协作，而原生开发在性能敏感场景和小型精简项目中更具优势。在前端开发领域，选择使用框架还是原生JavaScript进行开发一直是个值得探讨的话题。本文将以React为例，深入分析框架开发与原生开发的优劣势，探讨在不同场景下的最佳选择。直接使用原生JavaScript可以避免框架带来的额外开销，在性能要求极高的场景中更具优势。掌握原生JavaScript的基础知识比学习框架特定的概念和API更加直接。原生开发不依赖特定框架版本，避免了框架升级带来的迁移成本。

方法返回一个Promise对象，而非直接返回解析后的JSON数据。这是现代JavaScript中Fetch API的标准行为，需要使用关键字（或方法）来获取实际解析后的数据。设计原理分析异步JSON解析的必要性时序图#mermaid-svg-7Jig7rZhpCPACWbe {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-7Jig7rZhpCPACWbe .erro

/ 序列化内部过程伪代码实现// 检查循环引用// 应用 replacer 函数（如果提供）// 根据数据类型处理${// 序列化内部过程伪代码实现 function pseudoStringify(value , replacer , space) {// 检查循环引用 const seen = new WeakSet();// 应用 replacer 函数（如果提供） if(typeof replacer === 'function') {

JavaScript正则表达式是一种强大的文本处理工具，掌握其基本语法和高级技巧可以大幅提高文本处理效率。正则表达式由元字符、量词、分组等组成，通过合理组合这些元素，能够实现复杂的模式匹配需求。正确理解和使用标志（flags）可以让正则表达式匹配更精确、更高效，适应不同的文本处理需求。在实际应用中，需要注意正则表达式的可读性和性能问题，避免过于复杂的模式导致难以维护或性能下降。

这种模块化的CSS导入方式可能一开始不习惯，但它使CSS的管理更加清晰，也是现代前端开发的主流方式。可是即使我不导入它也没有提示，也没有报错信息，但是我确实是需要导入的，因为我需要打包，但是它不提示我要把哪些css文件导入到哪些css，这不是很奇怪吗？在前端工程中使用webpack打包CSS时，确实需要在JavaScript文件中导入CSS文件，这可能会让人感到困惑。你提出了一个很好的问题！直接导入 CSS 文件。在 JavaScript 中，是否需要导入 CSS 文件取决于具体的使用场景和项目需求。

Quill 默认不允许插入 iframe，需通过自定义模块扩展支持，但可直接忽略 iframe 插入逻辑。如果用户直接操作 DOM（如通过开发者工具），可通过 JavaScript 监听并移除 iframe。如果用户使用富文本编辑器（如 TinyMCE、Quill、CKEditor），可配置编辑器禁止插入。指令限制 iframe 的来源，间接阻止用户插入 iframe。通过以上方法，可以有效防止用户在你的网页中插入。仅允许加载同源的 iframe。要禁止用户在你的网页中插入。标签的 HTML 内容。

拦截器是Axios提供的强大功能，分为请求拦截器和响应拦截器，它们允许在HTTP请求发送前和接收响应后进行统一处理。拦截器采用中间件模式实现，能够实现请求与响应数据的全流程管控。以上内容详尽讲解了Axios请求拦截器和响应拦截器的核心概念、实现方式及高级应用，可实际应用于开发中提升API调用的质量和可维护性。重复请求是指在前一个相同请求尚未完成时，又发起了完全相同的请求。Axios拦截器通过责任链模式工作，将请求/响应处理分为多个环节，每个环节负责特定任务。

展开运算符是ES6引入的强大特性，用于展开可迭代对象。通过三个连续的点(…)表示，能将数组、对象甚至函数参数进行展开操作，极大提升代码简洁性与可读性。展开运算符是现代JavaScript开发中不可或缺的工具，掌握其各种用法能显著提高代码质量与开发效率。

宏任务队列中的执行顺序不是由代码调用顺序决定，而是由事件被添加到队列的顺序决定。对于setTimeout，延迟时间决定了它何时被添加到宏任务队列中，延迟短的会先执行，无论它们在代码中的调用顺序如何。JavaScript中的事件循环机制通过宏任务和微任务队列协同工作。执行流程遵循：执行同步代码、清空微任务队列、执行下一个宏任务的循环模式。理解这种机制有助于编写更高效、可预测的异步代码。

JavaScript引擎是执行JavaScript代码的核心组件，负责代码解析、编译和执行。区分引擎和宿主环境使JavaScript能在不同环境中运行，从浏览器扩展到服务器(Node.js)、桌面应用(Electron)和移动应用(React Native)，每个环境提供特定API。浏览器宿主环境是JavaScript引擎运行的容器环境，除了包含JavaScript引擎外，还提供DOM、BOM、Web API等浏览器特有功能，使JavaScript能与网页交互。

Web Worker和SharedArrayBuffer提供了并行计算能力，Async/Await使异步代码更易于理解，这些都是基于事件循环架构的扩展。事件循环是JavaScript引擎执行代码的核心机制，使得JavaScript能够在单线程环境下实现异步操作。单线程模型避免了复杂的线程同步问题，而事件循环则解决了单线程环境下的阻塞问题。了解事件循环机制对开发高性能JavaScript应用至关重要，能够避免常见的性能陷阱，实现真正的非阻塞编程模式。调用栈是一种数据结构，记录程序执行的位置。

async/await 是 JavaScript 中处理异步操作的强大工具，它建立在 Promise 的基础上，提供了更简洁、更直观的语法。掌握 async/await 的工作原理和使用技巧，可以显著提高代码的可读性和可维护性，同时避免回调地狱问题。正确使用 async/await 需要理解其底层机制，注意错误处理，并在适当场景选择并行或串行执行策略。

Python和JavaScript的HTTP请求模型反映了两种语言的设计哲学和应用场景差异。Python的requests库采用同步阻塞模型，而JavaScript的axios和fetch则默认为异步非阻塞模式。JavaScript作为浏览器环境的主要语言，其HTTP请求默认采用异步非阻塞模式，完美契合事件驱动的Web环境。非阻塞请求不会暂停当前执行线程，而是在后台处理请求，通过回调函数或Promise处理响应。两种语言都在向响应式编程模型发展，Python有RxPY，JavaScript有RxJS。

ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ  

Promise链式调用为处理复杂异步操作提供了优雅的解决方案。掌握这一技术能够编写出更加可维护、可扩展的异步代码，有效避免回调地狱，提升代码质量和开发效率。

效果

forEach 作为JavaScript数组方法，提供了简洁的遍历方式，适合处理需要对数组元素执行副作用操作的场景。了解其工作原理和局限性，合理选择循环方式，能够编写出更高效、更易维护的代码。

箭头函数带来了更简洁的语法和词法绑定的this，使JavaScript代码更加简洁优雅。但需要注意其使用场景的限制，合理选择传统函数和箭头函数，才能发挥各自的优势。

/ 目标:使用Promise管理XHR请求省份列表。'关联Promise的成功和失败处理函数...''Promise已成功解决(resolved)'// 服务器返回错误提示消息，插入到p标签显示。'XHR请求成功，触发resolve...''XHR请求失败，触发reject...'// xhr如何判断响应成功还是失败的?// 3.关联成功或失败函数，做后续处理。'XHR请求已发送，等待响应...''Promise回调函数开始执行''开始创建Promise...'// 1.创建Promise对象。

Promise 规范持续发展，JavaScript 生态也在不断优化处理异步操作的方式。了解 Promise 核心概念和使用模式，能够极大提升异步编程效率和代码质量。Promise 是 JavaScript 中处理异步操作的一种对象，它表示一个异步操作的最终完成（或失败）及其结果值。

效果