
JavaScript高频面试之重要知识点集锦
文章平均质量分 82
JavaScript高频面试之重要知识点集锦,帮助大家尽快梳理清楚知识点和实际应用场景
匹马夕阳
本人长期从事二三维WebGIS开发,致力于将复杂的地理数据可视化,专注于水利、农业、交通、气象等行业GIS应用开发,擅长使用JavaScript、VUE2/VUE3、Java等技术栈和GIS相关的框架和库,如Mapbox-GL、Leaflet、OpenLayers,等。
展开
-
npm、npx、yarn和pnpm的原理、使用方法和区别详解
特性npm、npx、yarn和pnpm安装速度较慢不适用(执行命令)快(并行安装)非常快(共享存储)依赖管理扁平化不适用扁平化符号链接和硬链接锁文件不适用yarn.lock全局安装支持不适用支持支持执行命令需要全局安装或用npx直接执行需要全局安装或需要全局安装或pnpm exec缓存本地缓存不适用全局缓存全局存储离线模式不支持不适用支持支持磁盘空间较大(重复存储)不适用较大(重复存储)较小(共享存储)安全性一般不适用提供校验提供校验npm。原创 2025-03-27 21:11:26 · 1231 阅读 · 0 评论 -
TypeScript(TS) 的使用初识
静态类型:开发者可以在编写代码时为变量、函数参数和返回值指定类型,编译器会在编译时检查类型错误,从而减少运行时 bug。面向对象编程:支持类、接口、继承等特性,使代码结构更清晰。工具支持:提供更好的代码补全、导航和重构功能,尤其在现代 IDE(如 VS Code)中。兼容性:完全兼容 JavaScript,可以直接使用现有的 JavaScript 代码和库。原创 2025-03-25 08:07:34 · 944 阅读 · 0 评论 -
Vite中的配置文件中build.lib的formats配置的详细使用
formats是 Vite 库模式中一个强大的配置选项,通过选择合适的格式,可以确保库在不同环境中都能正常工作。开发者应根据目标用户和使用场景(如现代网页、Node.js 或浏览器脚本)选择合适的格式组合,并通过明确入口点以提高用户体验。原创 2025-03-19 17:07:02 · 968 阅读 · 0 评论 -
前端 JavaScript 中快速发起多个下载请求时,解决浏览器的并发下载连接限制
快速发起多个下载请求时,浏览器可能无法处理所有请求,导致一些链接被忽略。可能的原因为浏览器对并发 HTTP 连接的限制,例如 Chrome 可能限制每秒下载 10 个文件(当你在前端 JavaScript 中快速发起多个下载请求时,浏览器可能无法同时处理所有请求,导致一些请求被忽略。通过在每次下载请求之间添加延迟,可以逐个处理请求,避免浏览器因并发限制而忽略某些请求。Firefox 在处理批量下载时可能表现不同,延迟方法可能无效(具体没有尝试),建议使用 JSZip 来确保所有文件都被包含。原创 2025-03-13 16:58:03 · 1223 阅读 · 0 评论 -
Vite项目中vite.config.js中为什么只能使用process.env,无法使用import.meta.env?
vite.config.js 只能使用 process.env 访问环境变量,因为它运行在 Node.js 环境中,而 import.meta.env 是专为客户端代码设计的特性,不适用于配置文件。通过合理使用 process.env 配置构建过程,并通过 import.meta.env 在客户端访问环境变量,可以最大化利用 Vite 的现代化特性,同时确保安全性和可维护性原创 2025-03-12 22:52:35 · 1345 阅读 · 0 评论 -
细说使用Vite构建项目时define: { ‘process.env‘: {} }的作用原理和最佳实践
是 Vite 项目配置文件(通常是 )中的一个选项,用于定义全局常量,这些常量会在构建过程中替换代码中的相应表达式。在这里,它将代码中的 替换为空对象 ,使 在浏览器环境中可用。在 Node.js 环境中, 是一个包含环境变量的对象。但在前端项目中,代码运行在浏览器中, 本身并不存在。如果代码尝试访问 ,会抛出错误。通过设置 ,Vite 在构建时会将所有 替换为空对象,这样代码至少不会因为 未定义而失败。虽然 有用,但 Vite 推荐使用 来管理环境变量。 专门为前端设计,仅暴露以 开头的变量原创 2025-03-12 14:28:20 · 998 阅读 · 0 评论 -
JavaScript 中的时间字符串格式详解
JavaScript 中的时间处理主要依赖于Date对象,时间字符串的格式化和解析是其核心功能之一。原创 2025-02-13 07:44:11 · 1103 阅读 · 0 评论 -
JS的<script> 标签中defer 和 async 两个属性的区别详解
标签的两个属性,用于控制外部脚本的加载和执行行为。它们的区别在于脚本的加载和执行时机,以及对页面渲染的影响。根据具体需求选择合适的属性,可以优化页面加载性能和脚本的执行顺序。原创 2025-02-03 11:42:02 · 736 阅读 · 0 评论 -
谈谈对JavaScript 中的事件冒泡(Event Bubbling)和事件捕获(Event Capturing)的理解
事件冒泡:是默认的事件传播方式。适用于事件委托(父元素处理多个子元素的事件)。事件捕获:可以在事件到达目标元素之前处理事件,适用于需要优先处理事件的场景。和:可以控制事件的传播和默认行为,提供更高的灵活性。这些机制可以结合使用,使你能够在复杂的用户交互中进行精准的事件管理。原创 2025-01-24 12:37:39 · 1259 阅读 · 0 评论 -
JS中window.dispatchEvent的原理和使用初识
`window.dispatchEvent` 是 JavaScript 中用于触发事件的一个方法,它允许开发者在 DOM(文档对象模型)中触发特定的事件。这对实现自定义事件或者将事件传递给其他组件或部分的应用非常有用。原创 2025-01-21 00:15:00 · 1815 阅读 · 0 评论 -
JS中ResizeObserver内置对象的使用初识
是一种用于观察元素大小变化的接口,可以非常方便地处理与布局相关的响应式设计。它提供了对元素大小变化的监听能力,特别适用于处理视图尺寸变化时的布局调整、组件刷新等操作。原创 2025-01-20 17:10:14 · 830 阅读 · 0 评论 -
基于TypeScript封装 `axios` 请求工具详解
TypeScript 项目中,封装一个详细的axios请求工具可以提高代码的可维护性、可重用性,并让请求逻辑与业务逻辑分离。以下是一个详细的封装示例,包括请求拦截器、响应拦截器、错误处理、以及类型定义。原创 2025-01-14 23:29:51 · 1139 阅读 · 0 评论 -
ES6中定义私有属性详解
Symbol:可以作为私有属性的键,但需要手动管理和访问,较为灵活。WeakMap:通过WeakMap存储私有数据,提供了更好的封装性,避免了直接暴露属性。符号(ES2020):最直接且简洁的私有属性实现,官方语法,强制封装。对于现代的前端开发,推荐使用符号来定义私有属性,尤其是在ES2020及以后版本的环境中。原创 2024-12-31 15:29:35 · 940 阅读 · 0 评论 -
JS中Symbol (符号)数据类型详解和应用场景
Symbol作为JavaScript中一种独特的数据类型,具有唯一性和不可枚举性,非常适合用于避免属性名冲突、定义私有属性以及扩展对象的功能。使用Symbol作为方法名,可以扩展内置对象的功能,而不会破坏其默认行为。是ES6引入的一种原始数据类型,表示唯一的标识符。值的主要用途是为对象的属性提供唯一标识,以避免属性名冲突。Symbol值可以作为对象的键,这样的属性是不可枚举的。创建的Symbol值都是唯一的,即使它们的描述相同。使用Symbol作为对象的键,避免属性名冲突。枚举,因此可以用来模拟私有属性。原创 2024-12-28 16:50:47 · 1110 阅读 · 0 评论 -
JS数值类型中特殊数值NaN(Not-a-Number)理解和应用场景
NaN是 JavaScript 数值类型中的一个特殊值,用于表示无法计算或无效的数值。它在异常处理、输入验证、数据清洗等场景中非常有用。要正确检测NaN,建议使用,而不是简单地使用isNaN()。原创 2024-12-28 16:26:58 · 425 阅读 · 0 评论 -
JS中类型化数组(Typed Arrays)详解和常见应用场景
类型化数组是处理和操作二进制数据的强大工具,适用于性能敏感的应用场景,如图像处理、音频处理和 WebGL 开发。通过合理使用类型化数组,能够极大提高应用的效率和兼容性。原创 2024-12-27 18:14:45 · 554 阅读 · 0 评论 -
详细对比JS中XMLHttpRequest和fetch的使用
在JavaScript中,XMLHttpRequest和fetch是两种用于进行 HTTP 请求的 API。它们的主要区别在于设计理念、用法和功能支持。原创 2024-12-26 16:53:24 · 846 阅读 · 0 评论 -
JavaScript 实现 LRU(Least Recently Used,最近最少使用)缓存淘汰算法
用 JavaScript 实现 LRU(Least RecentlyUsed,最近最少使用)缓存淘汰算法的代码。原创 2024-12-26 10:56:23 · 513 阅读 · 0 评论 -
剩余参数(rest parameters)和展开运算符(spread operator)详解及区别
剩余参数(Rest Parameters):用于函数定义中,将不确定数量的参数收集到一个数组中。展开运算符(Spread Operator):用于函数调用、数组或对象字面量中,将可迭代对象的元素展开。通过这些示例和解释,你可以看到虽然...符号在语法上相同,但它们在不同的上下文中执行不同的功能。原创 2024-12-26 10:02:14 · 622 阅读 · 0 评论 -
async/await 处理异步操作详解
在 JavaScript 中,处理异步操作不会阻塞同步进程。它们的设计目的是使异步代码看起来像同步代码,从而提高代码的可读性和可维护性。async函数返回一个 Promise 对象,而await关键字用于暂停async函数的执行,直到 Promise 解决(resolve)或拒绝(reject)。原创 2024-12-26 08:22:13 · 235 阅读 · 0 评论 -
JS中requestAnimationFrame()函数的原理和应用场景
是浏览器提供的一个 API,用于更高效地实现动画。它的核心原理是让浏览器在下次重绘(repaint)之前执行指定的回调函数,从而确保动画的流畅性,并避免不必要的性能开销。可以实现流畅、节能的动画效果,非常适合高性能要求的场景。原创 2024-12-23 15:11:10 · 795 阅读 · 0 评论 -
一篇梳理清楚JS中数组的常用方法和区别
在 JavaScript 中,数组是一种非常重要的数据结构,它提供了多种方法用于操作和处理数组的数据。随着 ES6的推出,很多新的数组方法得到了增加,这些方法使得数组操作更加简洁和强大。接下来我将梳理出常用的数组方法,特别是 ES6 新增的部分,并结合代码详细说明各自的特点和区别。原创 2024-12-22 21:16:32 · 682 阅读 · 0 评论 -
一篇梳理清楚http请求知识点
HTTP(超文本传输协议)是一个客户端(通常是浏览器)与服务器之间的通信协议。它定义了请求和响应的格式,支持各种类型的操作,如获取网页内容、提交表单数据、获取资源等。请求行(Request Line)请求头(Request Headers)请求体(Request Body)HTTP请求是前后端通信的基础,掌握其基本结构和请求方式非常重要。通过GETPOSTPUTDELETE等方法可以实现不同的功能,而请求头和请求体提供了更多的配置和数据传输方式。原创 2024-12-21 22:18:00 · 1071 阅读 · 0 评论 -
JavaScript中`getter` 和 `setter`的使用
在JavaScript中,`getter` 和 `setter`是一种特殊的方法,它们允许你通过属性的方式访问对象的值,而不是通过函数调用。`getter` 方法用于获取对象的属性值,而 `setter` 方法用于设置对象的属性值。它们通常用于封装对象的属性,使得属性访问更加安全和灵活原创 2024-12-19 11:12:47 · 557 阅读 · 0 评论 -
一篇梳理清楚JavaScript ES6中的Promise
Promise 改变了 JavaScript 的异步编程方式,提供了更清晰的语义、更优雅的代码结构和更强大的错误处理能力。原创 2024-12-19 10:09:52 · 1073 阅读 · 0 评论 -
JS的原型和原型链浅析
原型(Prototype)是对象的一个内部属性,每个对象都有一个与之关联的原型,原型是对象共享方法和属性的机制。原型链(Prototype Chain)是多个对象通过原型属性连接起来的链式结构,访问对象属性时会沿着原型链逐级查找。常见应用场景包括方法共享模拟继承等。通过理解原型和原型链的机制,我们可以更加高效地管理对象的属性和方法,利用继承和共享减少内存开销,提高代码的复用性和可维护性。原创 2024-12-18 21:18:40 · 979 阅读 · 0 评论 -
防抖(Debounce)和节流(Throttle)的区别和应用场景
防抖关注的是在一连串事件结束后执行一次(等待时间内如果有新事件触发就重新计时),强调“最后一次执行”。节流关注的是在指定时间间隔内执行一次(无论期间有多少次触发),强调“定期执行”。根据实际需求选择合适的技术,可以有效提升应用的响应速度和用户体验。原创 2024-12-17 21:01:25 · 1166 阅读 · 0 评论 -
JavaScript 闭包(Closures)
闭包是 JavaScript 中一个非常重要的概念,它指的是一个函数和它声明时所处的词法环境的组合。这意味着闭包可以访问并操作函数外部的变量。说人话,大概可以理解闭包是一个函数原创 2024-12-16 13:57:59 · 271 阅读 · 0 评论 -
JavaScript 中 apply、call 和 bind 的具体理解与区别
`apply`、`call` 和 `bind` 是 JavaScript 中函数方法,用于改变函数的 `this` 指向,尤其在函数调用时动态绑定上下文对象。它们的核心区别主要在于调用方式和应用场景。原创 2024-12-16 13:54:26 · 780 阅读 · 0 评论 -
一篇梳理清楚JavaScript 事件循环机制
JavaScript 是一种单线程语言,意味着它一次只能执行一段代码。然而,它的强大之处在于可以通过事件循环(Event Loop)实现异步操作,使得非阻塞的 I/O 成为可能。原创 2024-12-16 13:35:07 · 1054 阅读 · 0 评论