- 博客(52)
- 收藏
- 关注
RSS订阅原创 关于JavaScript中的filter方法
写到这里，关于 filter () 的所有知识点已经全部讲完。从基础用法到核心特性，从实战场景到避坑指南，从性能优化到手写实现，filter () 作为 JavaScript 数组的核心方法，看似简单，实则蕴含着很多前端开发的底层逻辑和最佳实践。其实，filter () 只是 JavaScript 众多数组方法的一个缩影。前端开发中，我们总会遇到各种各样的数组操作：遍历、筛选、映射、聚合、排序... 这些操作的核心，都是「如何用最优雅、最高效的方式处理数据」。
2026-01-09 21:09:56
444
原创 通讯协议：连接异构世界的“数字语言”核心解析
摘要： 通讯协议是数字设备互联的通用语言，定义了数据传输格式、时序和错误处理等规则，确保异构设备高效可靠交互。核心要素包括语法、语义、时序、地址标识、差错控制和流量控制。主流协议如TCP（可靠传输）、UDP（高效实时）、HTTP/HTTPS（Web交互）、MQTT（物联网轻量通信）及工业协议Modbus等，各有适用场景。工程实践中需根据业务需求、环境及安全性选择协议，并通过压缩、分包、优化重传等提升性能。未来趋势聚焦低延迟、轻量化、原生安全和AI自适应，以支撑5G、物联网等新兴技术发展。深入理解协议设计原理
2026-01-08 20:22:03
423
原创 什么是模块化
摘要：本文系统梳理了JavaScript模块化的发展历程与技术要点，从IIFE、CommonJS到ES Modules的演进过程，重点对比了CommonJS与ES Modules在加载时机、导入导出机制、缓存策略等维度的核心差异。文章深入解析了模块化在浏览器和Node.js双环境下的配置要点，揭示了Webpack/Vite等构建工具处理模块化的底层原理，并针对开发中常见的5大误区给出避坑指南。通过高频面试题解析，阐述了Tree-Shaking、循环依赖等进阶概念，最终指出模块化作为前端工程化基石的重要性，掌
2026-01-04 18:28:10
915
原创 JS 事件循环（Event Loop）
JavaScript事件循环机制解析：掌握异步执行顺序的关键 摘要：本文深入解析JavaScript的事件循环机制，揭示其作为单线程语言处理异步任务的核心原理。通过典型代码示例演示了同步任务、微任务和宏任务的执行顺序，详细讲解了事件循环的组件构成和执行流程。文章对比了浏览器与Node.js环境的差异，列举了常见误区，并提供了DOM操作、Vue.nextTick等实战应用场景。掌握事件循环的"同步→微任务→宏任务"执行规则，能有效避免异步顺序bug，深入理解框架异步API的底层实现，是进阶
2026-01-04 13:06:34
548
原创 聚焦 “原型链与继承”
道：原型链是 JS 的底层机制，是 “对象复用” 的核心，ES6 class 只是其语法糖；术日常开发用 class + extends 写继承（简洁高效）；看懂框架源码时，要能识别寄生组合继承、混入继承的本质；避坑关键：分清 __proto__ 与 prototype，理解原型链查找规则；终极认知：JS 中 “一切皆对象”，而对象的 “遗传关系” 由原型链定义 —— 掌握原型链，才能真正理解 JS 的面向对象设计思想，看懂 Vue、React 等框架的底层实现。
2026-01-03 19:19:41
771
原创 JavaScript闭包：从底层原理到实战
当一个内部函数被其外部作用域之外的变量引用时，就形成了闭包。此时内部函数会 “捕获” 其定义时所在的作用域链，即使外部函数执行完毕，作用域链中的变量也不会被垃圾回收（GC），仍能被内部函数访问。道：闭包是 JS 词法作用域的自然延伸，是 “函数一等公民” 特性的必然结果；术：用闭包实现模块化、状态持久化、异步处理，但需警惕内存泄漏；终极认知：闭包不是 “技巧”，而是 JS 的底层机制 —— 理解闭包，才能真正看懂框架源码、写出高性能代码。
2026-01-02 23:50:39
833
原创 JavaScript的同步与异步
JS 的同步异步本质是单线程模型下的效率优化方案同步保证代码执行的顺序性和确定性，适用于简单、无耗时的操作。异步通过 “任务队列 + 事件循环” 实现非阻塞执行，适用于耗时操作（网络、IO 等）。异步编程的演进（回调→Promise→async/await），核心是 “降低复杂度、提升可读性”。掌握本文的原理、案例和避坑点，你就能轻松应对面试中的同步异步问题，以及实际开发中的异步场景优化啦！
2025-12-28 17:43:46
790
原创 JavaScript模块化封装与面向对象方法：从基础到工程化实践
JavaScript模块化封装与面向对象方法，是从“代码能跑”到“代码好用”的关键跨越。模块化解决了代码的隔离与依赖管理问题，面向对象提供了灵活的封装、继承与扩展能力，二者协同使用，可构建出高内聚、低耦合、可维护的前端工程化架构。在实际开发中，需深入理解二者的本质原理，避免陷入语法糖的误区，结合具体场景灵活运用——既不盲目追求“面向对象万能论”，也不忽视模块化的规范价值。随着前端技术的迭代，模块化与面向对象的思想仍在不断演进，掌握其核心逻辑，才能从容应对复杂项目的开发挑战。
2025-12-26 17:48:32
864
原创 深入理解浏览器缓存：从原理到实战的全面优化指南
本文系统解析浏览器缓存机制，分为强缓存和协商缓存两类。强缓存通过Cache-Control/Expires直接复用本地资源，协商缓存通过ETag/Last-Modified验证资源更新。针对不同资源类型推荐差异化策略：静态资源采用"长强缓存+版本控制"，HTML文件禁用强缓存，动态接口按需设置短期缓存。文章还剖析了常见缓存问题及解决方案，如资源更新失效、304协商缓存异常等，强调缓存优化的核心在于平衡性能与数据一致性。通过合理配置缓存策略，能显著提升页面加载速度，降低服务器压力，是前端性
2025-12-25 20:39:04
680
原创 吃透TCP/IP七层模型（OSI）：从原理到实战，95%开发者必懂的网络底层逻辑
TCP/IP七层模型的核心价值，不是让你死记硬背层级和协议，而是建立一套“分层思维”——当网络出现问题时，能按“应用层→传输层→网络层→数据链路层→物理层”的顺序定位问题，从“盲目试错”变成“精准解决”。对于开发者而言，应用层、传输层、网络层是日常接触最多的三层，需重点掌握HTTP、TCP、IP的核心逻辑；数据链路层和物理层虽不常直接操作，但能帮你排查底层网络故障。
2025-12-24 21:01:20
846
原创 JavaScript中的循环
循环是编程中处理重复逻辑的核心范式，而 JavaScript 的循环体系兼具灵活性与特殊性 —— 它不仅继承了传统结构化编程的循环思想，更融入了函数式编程的迭代理念。关键认知：JS 循环的性能瓶颈往往不在于循环本身，而在于循环体内部的操作（如 DOM 操作、冗余计算）和迭代器的效率。这三类是最经典的循环形式，基于 “初始化 - 条件判断 - 迭代” 的三段式逻辑，适用于大多数简单迭代场景。会遍历数组的非数字属性（如arr.name），且索引为字符串类型。：遍历可迭代对象（数组、字符串、Map、Set 等）
2025-12-21 18:49:43
560
原创 深入浅出 Ajax：从原理到实战，打造高可靠的前端请求方案
Ajax 并非单一技术，而是一套组合方案：通过 JavaScript 异步发送 HTTP 请求，获取服务器数据后，通过 DOM 操作更新页面，全程无需刷新浏览器。其核心是（XHR）对象 —— 浏览器内置的用于与服务器交互的 API，而 jQuery Ajax 本质是对 XHR 的封装，简化了底层操作。Ajax 作为前端异步请求的核心技术，其本质是的封装与应用。封装通用请求函数：统一处理 Token、错误、返回格式，减少重复代码；全局拦截与状态管理：通过处理 loading、权限校验；避坑核心。
2025-12-18 20:03:39
1117
原创 吃透 JS 深浅拷贝：从原理到实战，避坑指南全解析
本文深入解析JavaScript深浅拷贝的核心原理与实践应用。通过剖析JS数据存储机制，揭示深浅拷贝的本质差异：浅拷贝仅复制第一层属性（引用类型共享地址），而深拷贝递归复制所有层级（完全隔离数据）。文章详细对比了Object.assign()、展开运算符等浅拷贝方案与JSON.parse(JSON.stringify())、手写递归等深拷贝方案的适用场景及局限性，特别指出JSON方案会丢失函数、正则等特殊类型的问题。针对生产环境，推荐使用Lodash.cloneDeep处理复杂场景，并给出循环引用、Symb
2025-12-17 21:37:36
856
原创 关于JS中的全部存储方式
HTTP 协议的无状态特性导致浏览器与服务器每次通信都无法保留上下文，而客户端存储正是解决这一痛点的关键：核心需求本质是：在浏览器端安全、高效地存储不同生命周期、不同容量级别的数据。JS 客户端存储主要分为 5 大类，覆盖从 1KB 到 GB 级的存储需求，适用场景各有侧重：存储方案容量限制生命周期同源策略访问权限核心特性Cookie4KB可配置（Expires/Max-Age）是前后端均可访问随 HTTP 请求自动携带，支持跨域配置localStorage5-10MB永久（手动清除）是仅前端访问同步操作，
2025-12-14 17:21:22
569
原创 JavaScript中的Set和Map
数组查找元素需遍历，时间复杂度 O (n)，且去重需额外处理；对象的键只能是字符串 /.Symbol，无法直接使用引用类型作为键，且无法快速获取键值对数量。ES6 引入的Set（集合）和Map（映射），正是为解决这些痛点而生 —— 它们提供了更高效的查找、插入、删除操作，以及更灵活的键类型支持，成为复杂业务场景的优选数据结构。Set 和 Map 作为 ES6 的核心数据结构，解决了数组和普通对象的诸多痛点：Set 提供高效的不重复集合管理，Map 提供灵活的键值对映射。
2025-12-13 10:36:24
384
原创 JavaScript中的循环特点和区别
循环是编程的基础逻辑之一，在 JavaScript 中更是贯穿前端开发、Node.js 后端等所有场景 —— 从 DOM 遍历、数据处理到异步流程控制，几乎无处不在。但多数开发者仅停留在for/forEach的基础使用，忽略了不同循环的适用场景、性能差异和进阶技巧。本文将从基础语法到实战优化，全面拆解 JS 循环的核心知识点，帮你掌握 “什么时候用什么循环” 的底层逻辑。
2025-12-12 08:07:26
593
原创 JavaScript中的跨域问题
浏览器的核心安全机制，要求协议、域名、端口三者完全一致才视为「同源」，否则即为跨域。→（同源）→（协议不同）→（域名不同）→（端口不同）跨域问题的核心是浏览器同源策略，解决方案的本质都是「绕开或合规突破该策略」。实际开发中，CORS + 代理服务器是最通用、最安全的组合（覆盖 90% 场景），其他方案根据特殊需求选型（如老浏览器用 JSONP、实时通信用 WebSocket）。
2025-12-09 22:41:12
1040
原创 吃透JavaScript闭包：从本质到实战的全方位解析
闭包是指那些能够访问自由变量的函数。自由变量是指在函数中使用，但既不是函数参数也不是函数局部变量的变量。通俗来说，闭包就像一个“带背包的函数”：这个函数不仅能执行自身逻辑，还能背着外层函数的变量“走四方”，即使外层函数已经“退场”，背包里的变量依然完好无损。我们用一个最简单的例子感受一下：这里的inner函数就是闭包。当outer执行完毕后，理论上count应该被销毁，但由于inner被外部的counter引用，它捕获了outer的作用域，导致count一直保存在内存中，每次调用counter。
2025-12-07 20:05:40
842
原创 从本质到实践：面向对象与面向过程的深度辨析
面向过程是“做事的逻辑”，面向对象是“做人的逻辑”——前者教会你如何拆解步骤，后者教会你如何抽象角色。对于开发者而言，真正的成长不是“选边站”，而是：理解两种范式的本质思维，而不是死记语法特性；能根据问题复杂度和需求场景，做出“最合适”的技术选择；在实际开发中灵活融合二者，写出既高效又易维护的代码。编程的终极目标是解决问题，而不是固守某种范式。无论是OOP还是POP，能让代码“清晰、高效、可维护”的，就是好的编程思路。
2025-12-06 21:19:53
840
原创 从回调地狱到优雅异步：Promise完全指南
Promise是JavaScript异步编程的核心内容，它通过状态管理和链式调用解决了回调地狱的问题，让异步代码更具可读性和可维护性。掌握Promise的创建、状态转换、链式调用以及静态方法（all、race、allSettled），并结合async/await语法，能让你在处理异步操作时游刃有余。异步编程是前端面试的高频考点，建议大家多动手实践，尝试用Promise重构过去的回调函数代码，真正理解其背后的逻辑和价值。
2025-12-05 21:55:33
684
原创 Ajax优缺点
AJAX 的出现，让 Web 应用从 “静态页面” 迈入 “动态交互” 时代；如今，尽管 Fetch API、Axios 等工具已取代原生 XMLHttpRequest 成为主流，但 AJAX 的核心思想（异步通信、局部更新、数据与呈现分离）仍是前端开发的基础。90 分的前端开发者，不会盲目追捧新技术，也不会忽视旧技术的局限 —— 而是能根据业务场景，灵活运用 AJAX 的优势，同时通过技术手段规避其局限。
2025-12-03 21:01:21
963
原创 rgba()和opacity的透明效果有什么不同
opacity 作用于元素，以及元素内的所有内容的透明度， 而 rgba ()只作用于元素的颜色或其背景色。
2025-11-24 20:00:44
251
原创 Ajax优缺点
前端和后端负载均衡（将一些后端的工作交给前端，减少服务器与宽度的负担）界面和应用相分离（ajax将界面和应用分离也就是数据与呈现相分离）。安全问题 Aajax暴露了与服务器交互的细节，对搜索引擎的支持比较弱。异步与服务器通信（使用异步的方式与服务器通信，不打断用户的操作）破坏了Back与History后退按钮的正常行为等浏览器机制。无刷新更新数据（在不刷新整个页面的情况下维持与服务器通信）ajax不支持浏览器back按钮。
2025-11-19 20:56:03
102
原创 foreach、for in 和for of的区别
foreach对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。For in 循环遍历的值都是数据结构的键值。for of 不能遍历对象。
2025-11-17 20:49:01
84
原创 http和https分别是什么？区别是什么？
HTTPS是在HTTP协议的基础上增加了SSL/TLS加密技术，通过加密通信确保数据的安全性和完整性，在HTTPS协议中，所有的数据在传输过程中都经过加密处理，即使数据在传输过程中被拦截，也无法被轻易破解。是一种无状态、明文传输的网络协议，用于在客户端（如浏览器）与服务器之间传输超文本（如HTML）信息。在于安全性，HTTPS通过SSL/TLS加密和身份认证机制，解决了HTTP明文传输的安全隐患。HTTPS（安全超文本传输协议）。HTTP和HTTPS的主要区别。HTTP（超文本传输协议）
2025-11-08 08:51:17
97
原创 解构赋值及其原理
Destructuring Assignment）是 JavaScript 中的一种语法特性，允许从数组或对象中提取数据并赋值给变量。它提供了一种简洁的方式访问复杂数据结构中的特定值，减少了传统赋值所需的冗余代码。解构赋值的底层实现依赖于模式匹配。当左侧的变量模式与右侧的数据结构匹配时，引擎会自动提取对应的值并完成赋值。其核心逻辑是通过迭代或属性访问，按照模式对数据结构进行解包。
2025-11-06 19:37:01
109
原创 Set和Map有什么相同和不同之处?
Set通过元素值判断唯一性，Map通过键的唯一性保证数据不重复。：Set存储单个元素，Map存储键值对（键唯一，值可重复）。两者均支持存储唯一性元素，且均可通过迭代器访问元素。：Set只能通过迭代器遍历，Map可通过键直接检索值。保持插入顺序），Map的键可有序（如。：Set通常无序（可通过特殊实现如。
2025-11-04 19:41:01
81
原创 Ajax优缺点
前端和后端负载均衡（将一些后端的工作交给前端，减少服务器与宽度的负担）界面和应用相分离（ajax将界面和应用分离也就是数据与呈现相分离）。安全问题 Aajax暴露了与服务器交互的细节，对搜索引擎的支持比较弱。异步与服务器通信（使用异步的方式与服务器通信，不打断用户的操作）破坏了Back与History后退按钮的正常行为等浏览器机制。无刷新更新数据（在不刷新整个页面的情况下维持与服务器通信）ajax不支持浏览器back按钮。
2025-10-30 19:37:31
97
原创 什么是作用域？
作用域主要解决变量命名冲突、隔离不同代码块的变量环境，确保代码逻辑的局部性，提升程序可靠性。是编程中定义变量、函数等可访问范围的概念，用于控制变量生命周期和可见性。作用域（Scope）
2025-10-29 20:42:46
98
原创 什么是封装？为什么要封装？
把相关联的变量和函数封装成一个对象，变量体现对象的属性，函数体现对象的行为，契合我们对客观世界的认知方式。隐藏对象的内部状态和实现细节，仅对外提供公共访问接口的面向对象编程方法。能够修改自身的实现代码，而无需改动调用该代码的程序片段，使代码更易维护。实现了对属性数据访问的限制，提升了代码的安全性。
2025-10-27 20:41:30
67
原创 var let const 的区别和使用场景?
适用于全局变量或函数内部无需块级隔离的场景（如 ES6 之前）。用于需要局部隔离的场景（如循环计数、临时变量），避免污染全局变量。声明常量（如配置参数、固定值），确保不可修改以减少错误。，不允许重复声明和重新赋值（常量），声明时必须初始化。，不允许重复声明，允许重新赋值，不存在变量提升；，允许重复声明和重新赋值，存在变量提升；const 是块作用域。var 是函数作用域。
2025-10-26 18:12:57
100
原创 箭头函数和普通函数有什么区别？
this指向不同，箭头函数没有this，在声明的时候，捕获上下文的this供自己使用，一旦确定不会再变化。在普通函数中，this指向调用自己的对象，如果用在构造函数，this指向创建的对象实例。箭头函数没有arguments(实参列表，类数组对象)，每一个普通函数在调用后都有一个arguments对象，用来存储实际传递的参数。箭头函数不能作为构造函数来使用，普通函数可以用作构造函数，以此来创建一个对象的实例。箭头函数都是匿名函数，而普通函数既可以是匿名函数，也可以具名函数。箭头函数没有原型，而普通函数有。
2025-10-25 09:52:46
212
原创 什么是ajax，有什么优点？
ajax是JavaScript中异步请求数据的一种方法，它可以在不刷新页面的情况下更新页面内容，提高用户体验，减少浏览器负担，网络流量。datatype返回值有json、xml、html、text、script、jsonp。
2025-10-24 20:40:42
120
原创 http和https分别是什么？区别是什么?
https相当于HTTPS协议，英文全称HyperText Transfer Protocol over SecureSocket Layer，超文本传输安全协议的意思，HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间)。http也相当于HTTP协议，英文全称是HyperText TransferProtocol，是超文本传输协议的意思，http协议它不仅保证计算机正确快速的传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示。
2025-10-16 20:32:30
201
原创 面包屑的概念与逻辑
面包屑导航是网页设计中重要的导航元素，通过层级路径显示用户当前位置，提升网站的可用性和导航效率。其实现包括登录验证、动态加载权限数据、渲染导航列表、记录跳转路径等功能，同时需确保数据安全和权限控制。面包屑导航能有效减少用户迷失，为复杂网站提供清晰的层级结构，优化用户体验。
2025-10-15 20:13:49
228
原创 js常用的几种事件
鼠标事件：onmousedown鼠标按钮被按下、onmouseup鼠标按键被松开、onmousemove鼠标被移动、onmouseover鼠标移动到某元素上、onmouseout鼠标从某元素移开。键盘事件：onkeydowm某个按键被按下、onkeyup某个按键被松开、onkeypress某个键盘按键被按下并松开。表单事件：onsubmit提交按钮被点击、onreset重置按钮被点击、oninput在input框被输入内容时。选择和改变事件：onchange域的内容被改变、onselect文本被选中。
2025-10-09 19:42:19
311
原创 js添加删除替换插入元素所用的方法？
添加：createElement创建元素节点node.appendChild(child) node父级-child子级元素追加到最后边。删除：node.removeChild(child) node父级-child子级。替换：父级.replaceChild(节点对象1，节点对象2)第一个参数为新建的节点，第二个是被替换的节点。插入：node.insertBefore(child，指定元素)。
2025-09-21 12:37:11
80
原创 js怎样控制浏览器前进、后退、页面跳转
window.history.go()-这种方法可以控制页面前进或后退，其参数为正数时前进，负数时后退，为0时刷新当前页面。window.location.href=..这种方法可以直接改变当前页面的地址，不打开新的标签页。window.history.back(-1)-这种方法可以返回上一个页面，相当于浏览器的后退。window.open("')-这种方法可以打开新的标签页并在新标签页跳转到页面。
2025-09-20 18:50:15
137
原创 dom中的节点分为几种类型
文档片段节点：是唯一在HTML文档中没有对应标记的节点，当需要进行大量dom操作时，可以把dom节点加入到文档片段节点中进行操作，最后一次性渲染以提高效率。文档类型节点：代表文档类型，一般指html第一行的doctype。文档节点：代表整个文档，也是DOM文档树的根节点。文本节点：代表html标签中的文本内容。注释节点：代表html文档中的注释内容。属性节点：代表html标签的属性。元素节点：代表html中的标签。
2025-09-19 21:45:39
90
原创 在js中哪些值会被转换为false
1.数据值为undefined时，表示未定义视为false。4.NaN表示无法计算结果视为false。3.数字0，若是字符串0则视为true。6.布尔值为false时视为false。2.null，表示空值视为false。5.空字符串视为false。
2025-09-17 20:17:35
108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人