~无忧花开~-CSDN博客

原创 JavaScript学习笔记(二十三)：ES6 Symbol特性全解析

ES6引入的Symbol是一种表示唯一值的原始数据类型，具有不可变性和唯一性特点。通过Symbol()函数创建，即使描述相同生成的Symbol也不同。主要用途包括：作为对象唯一属性键避免冲突、模拟私有属性、定义常量以及通过内置Symbol值（如Symbol.iterator）实现元编程。Symbol属性不会被常规方法遍历，不能隐式转为字符串或JSON序列化，但为JavaScript提供了更灵活的编程能力，特别适合需要唯一标识和避免命名冲突的场景。

2025-10-02 08:00:00 177

原创 JavaScript学习笔记(二十二)：垃圾回收机制与内存优化

JavaScript的垃圾回收机制主要采用标记-清除算法，结合分代回收策略（新生代用Scavenge算法，老生代用标记-清除/整理）。通过增量标记和并发回收减少阻塞。常见内存泄漏包括全局变量、未释放的闭包、定时器、DOM引用等。优化建议：减少全局变量、及时释放引用、使用弱引用、分页加载数据。可利用Chrome DevTools和performance.memory API监控内存。虽然现代GC机制高效，理解其原理有助于编写更健壮的代码。

2025-10-01 08:00:00 165

原创 JavaScript学习笔记(二十一)：深入解析ES6模块化

ES6模块化是JavaScript标准化的模块系统，通过import/export语法实现静态加载。支持具名导出、默认导出和动态导入，模块默认在严格模式下执行且作用域隔离。应用场景包括工具函数导出（具名导出）、主要功能暴露（默认导出）、按需加载（动态导入）和混合导出。注意事项包括文件扩展名、严格模式、静态分析和CORS限制。优化建议涉及模块组织、TreeShaking和路径别名配置。相比CommonJS，ES6模块具有静态加载、实时引用等优势，是现代前端开发的高效代码组织方式。

2025-09-30 08:00:00 450

原创 JavaScript学习笔记(十九)：Async关键字全解析

Async是ES6引入的关键字，用于声明异步函数并返回Promise对象，配合await可实现同步式异步编程。主要应用于简化Promise链、顺序/并行执行异步任务，支持在类方法和生成器中使用。使用时需注意错误处理（try/catch）、优化并行执行（Promise.all）、避免顶层await和循环陷阱。正确使用能提升代码可读性，但需平衡顺序逻辑与并行性能。该语法已被现代浏览器和Node.js广泛支持，是处理异步代码的高效方案。

2025-09-29 08:00:00 488

原创 JavaScript学习笔记(二十)：ES6 Class类语法全解析

ES6 Class类是构造函数的语法糖，提供更清晰的面向对象编程方式。核心特性包括：通过constructor定义初始化方法，类方法默认挂载到原型；使用extends实现继承，子类需先调用super()；支持静态方法、getter/setter和私有字段(#前缀)。典型应用场景包括组件封装、数据模型定义等。需注意：类声明不会提升，优先使用组合而非复杂继承链，私有字段替代传统_命名约定。本质上仍是基于原型的继承，适合需要创建多个相似对象的场景，简单对象仍建议使用字面量。

2025-09-29 08:00:00 323

原创 JavaScript学习笔记(十八)：Promise详解

Promise是ES6引入的异步编程解决方案，用于管理回调地狱和链式调用。它有三种状态：Pending、Fulfilled和Rejected。通过new Promise()创建，支持resolve和reject操作。Promise提供静态方法如all()、race()等处理多个Promise。应用场景包括异步请求封装、链式调用和并行执行。使用时需注意错误捕获、状态不可逆和性能优化，建议结合async/await提升代码可读性。Promise是现代JavaScript开发的核心异步处理工具。

2025-09-28 11:22:55 3005 1

原创 JavaScript学习笔记(十七)：ES6生成器函数详解

ES6生成器函数（function*）通过yield关键字实现暂停和恢复执行，返回可迭代的生成器对象。其核心特性包括：1）惰性求值，适合处理大数据或无限序列；2）简化异步流程控制；3）实现状态机逻辑。使用时需注意执行顺序、错误处理和资源清理，建议结合for...of遍历和Promise优化性能。虽然async/await更常用，但生成器在特定场景仍具优势，如需要精细控制执行流程时。

2025-09-28 10:32:43 574

原创 JavaScript学习笔记(十五)：ES6模板字符串使用指南

本文详解ES6模板字符串的特性与用法。模板字符串使用反引号包裹，支持多行文本和通过${}嵌入表达式，相比传统字符串拼接更简洁高效。重点介绍了标签模板、原始字符串、嵌套模板等高级用法，并列举了在HTML生成、SQL拼接等场景的应用。同时指出需注意的转义规则、性能优化和XSS防范等事项，建议结合Babel确保兼容性。模板字符串极大提升了字符串处理的灵活性和可读性，是ES6的重要特性之一。

2025-09-27 10:00:00 461

原创 JavaScript学习笔记(十六)：ES6扩展运算符使用指南

ES6扩展运算符(...)是一种用于展开可迭代对象(数组、字符串等)的语法，可将元素拆分为独立项。主要功能包括：数组合并、函数参数传递(替代apply)、对象浅拷贝合并(需ES2018支持)。常见应用场景有数组/对象复制、多对象合并、字符串转数组等。需注意浅拷贝问题(嵌套结构共享引用)、仅适用于可迭代对象、性能考量等限制。与剩余参数不同，扩展运算符用于展开而非收集元素。建议在深拷贝场景结合其他方法，并注意代码可读性。合理使用可提升代码简洁性，但复杂场景需考虑兼容性和性能问题。

2025-09-27 09:00:00 384

原创 JavaScript学习笔记(十四)：ES6 Set函数详解

Set是ES6新增的数据结构，特性是成员值唯一不重复。主要方法包括add(添加)、delete(删除)、has(判断存在)、clear(清空)和size(大小)属性。支持四种遍历方式：keys()、values()、entries()和forEach()。常用于数组/字符串去重、存储唯一值(DOM元素、用户ID等)和集合运算(并集/交集/差集)。注意Set认为NaN相等，但对象引用不同。相比数组，Set在查找、去重和内存使用上更高效，适合大数据量处理，能显著提升性能。

2025-09-26 16:32:14 595

原创 JavaScript学习笔记(十三)：JS解构技巧详解

JavaScript解构赋值是ES6的重要特性，允许从数组和对象中提取值并赋给变量，显著简化代码。数组解构按顺序匹配元素，对象解构按属性名匹配。支持默认值、别名和嵌套解构，应用场景包括函数参数、变量交换、模块导入等。使用时需注意解构失败、默认值生效条件和变量重命名。优化技巧包括避免过度嵌套、处理边界条件和动态属性名解构。解构赋值能提升代码简洁性和可读性，是现代JS开发中处理数据结构的有效工具。

2025-09-26 16:21:15 559

原创 JavaScript学习笔记(十二)：call、apply和bind使用指南

JavaScript中的call、apply和bind方法都用于改变函数执行时的this指向，但各有特点：call立即执行函数，参数逐个传递；apply也立即执行，但参数以数组传递；bind则返回新函数并可预先绑定参数。call/apply适用于动态改变this并立即执行，bind适合延迟执行或固定this的场景。注意：bind会创建新函数可能影响性能，箭头函数的this不可改变。建议优先使用call/apply，bind用于回调处理，在高频调用中缓存绑定函数，ES6环境下可用箭头函数替代bind。

2025-09-25 16:34:33 566

原创 JavaScript学习笔记(十一)：this使用指南

JavaScript中的this关键字指向当前执行上下文，其值由调用方式决定。主要绑定规则包括：默认绑定（全局或undefined）、隐式绑定（对象方法）、显式绑定（call/apply/bind）、new绑定（构造函数）和箭头函数（继承外层this）。典型应用涵盖对象方法、事件处理、构造函数等场景。需注意严格模式影响、箭头函数特性及回调中的this丢失问题。建议明确绑定规则，合理使用箭头函数/bind，避免直接传递对象方法，并采用严格模式确保安全。掌握this的动态特性有助于灵活控制函数上下文。

2025-09-25 16:07:15 608

原创 JavaScript学习笔记(十)：变量提升机制详解

JavaScript变量提升机制将var声明和函数声明移至作用域顶部，但初始化保留原位。var变量提升后访问值为undefined，函数声明可提前调用，而函数表达式仅提升变量。let/const存在暂时性死区，不会提升。函数声明优先于同名变量声明，但过度依赖提升会降低代码可读性。现代开发推荐使用let/const替代var，严格模式限制未声明变量赋值。理解提升机制有助于调试作用域问题，提升代码质量。

2025-09-24 14:06:27 435

原创 JavaScript学习笔记(九)：作用域与闭包全解析

JavaScript作用域分为全局、函数和块级作用域（ES6引入let/const）。闭包是函数能访问其词法作用域外变量的特性，通过嵌套函数实现，用于封装私有变量、模块化等。常见应用包括数据封装、事件处理和函数柯里化。ES6的let/const解决了var的变量提升问题。使用闭包需注意内存泄漏风险，避免循环中意外共享变量。建议优先使用块级作用域，合理利用闭包特性，及时清理资源，并通过模块化实现私有成员。闭包是JS重要特性，正确使用可提升代码质量和可维护性。

2025-09-24 11:08:58 620

原创 JavaScript学习笔记(七)：函数全解析

JavaScript函数是用于封装逻辑的可重用代码块，支持函数声明、表达式和ES6箭头函数。箭头函数简化语法，无this绑定问题但不适用构造函数。函数常用于事件处理、异步操作和高阶函数(map/filter等)。注意作用域、闭包和this绑定问题，推荐使用模块化避免全局污染。性能优化建议包括节流/防抖、减少嵌套函数，代码组织上应拆分复杂逻辑、使用清晰命名。高级特性包括生成器函数和async/await异步处理。

2025-09-23 16:54:33 253

原创 JavaScript学习笔记(八)：性能优化之节流与防抖

节流和防抖是前端优化高频事件的技术手段。节流通过设定时间间隔稀释执行频率，适合滚动、resize等场景；防抖通过延迟等待确保事件停止后才执行，适用于输入联想和表单验证。实现上，节流记录时间戳控制触发，防抖通过定时器重置来延迟执行。优化建议包括合理设置延迟时间、清除定时器避免内存泄漏，动画场景可结合RAF。选择策略上，性能敏感场景用节流，用户输入用防抖，复杂交互可组合使用，框架中可封装为Hook或指令。

2025-09-23 00:00:00 530

原创 JavaScript学习笔记(六)：运算符全解析

JavaScript运算符可分为算术、赋值、比较、逻辑、位运算等类型，用于执行数学运算、变量赋值、条件判断等操作。算术运算符（+、-、*、/等）处理数值计算，比较运算符（==、===、>等）返回布尔值，逻辑运算符（&&、||）组合条件判断。特别要注意==与===的区别，以及++/--的前后置差异。合理使用括号明确优先级，优先选择严格比较===，并利用控制台调试复杂表达式。ES6新增了展开运算符(...)和可选链运算符(?. )等特性，建议参考MDN文档了解更多细节。

2025-09-22 16:51:56 667

原创 JavaScript学习笔记(五)：条件语句使用指南

JavaScript条件语句是逻辑控制的核心，包括if/else、switch和三元运算符三种主要形式。if/else适合处理复杂条件逻辑，switch适用于多离散值匹配，三元运算符常用于简单条件赋值。使用时应避免过度嵌套，保持代码可读性。优化技巧包括：利用对象字面量替代switch、短路求值优化if-else、条件排序策略、Map处理复杂条件等。性能方面，三种方式差异不大，应优先考虑代码可读性和团队统一风格。

2025-09-22 16:51:46 558

原创 JavaScript学习笔记(三)：常用对象解析

JavaScript内置常用对象包括Object、Array、String、Date、Math和RegExp，各具特定功能。Object用于键值对存储，Array处理有序集合，String操作文本，Date管理时间，Math提供数学方法，RegExp实现模式匹配。使用时需注意特性：对象属性动态访问用[]，数组操作注意性能，字符串不可变，Date月份从0开始，Math为静态方法，正则需转义特殊字符。建议优先使用字面量语法，处理数据类型和边缘情况，优化正则性能。

2025-09-21 09:00:00 746

原创 JavaScript学习笔记(四)：正则表达式使用详解

JavaScript正则表达式详解：本文介绍了JS中正则表达式的基本用法，包括创建方式（字面量和构造函数）、常用修饰符（i/g/m）和匹配方法（test/exec）。重点讲解了分组捕获、量词匹配、字符类等核心概念，并提供了表单验证、字符串替换等实用场景示例。文章还指出了性能优化、特殊字符转义等注意事项，建议优先使用字面量语法并结合工具测试。最后总结了正则表达式的应用技巧，包括注释复杂正则、避免过度依赖等最佳实践。

2025-09-21 09:00:00 561

原创 JavaScript学习笔记(一)：数据类型解析

JavaScript数据类型分为原始类型（Number、String、Boolean、Null、Undefined、Symbol、BigInt）和引用类型（Object及其子类）。原始类型不可变、按值传递，引用类型可变、按引用传递。类型检测可通过typeof、instanceof和Object.prototype.toString实现，需注意隐式转换和比较陷阱（如浮点精度、==与===区别）。开发中应合理使用模板字符串、严格比较，并注意深拷贝与原始/引用类型的传递差异，以编写更健壮的代码。

2025-09-20 17:35:15 478

原创 JavaScript学习笔记(二)：遍历方法汇总

本文总结了JavaScript中数组和对象的常用遍历方法。数组遍历包括for循环（精确控制）、forEach（简单遍历）、map/filter（返回新数组）、reduce（累积计算）和for...of（遍历可迭代对象）。对象遍历主要有for...in（遍历所有属性）、Object.keys/values/entries（获取属性名/值/键值对）。性能方面，for循环最快，高阶函数稍慢但更简洁；对象遍历建议优先使用Object方法而非for...in。选择方法时应根据具体需求在性能与代码简洁性间权衡。

2025-09-20 17:29:30 974

原创 vue3学习日记(十九)：组件实例详解

Vue3组件开发核心要点：组件通过defineComponent或Composition API创建，包含Props、Emits、Slots等特性。动态表单使用v-model绑定，状态共享采用provide/inject。注意事项包括避免响应式数据解构丢失、生命周期时序问题等。建议进行性能优化（shallowRef/computed）、代码组织（自定义Hook/script setup语法）和类型安全（TypeScript定义）。适用于需要响应式数据管理和组件复用的现代Web应用开发。

2025-09-19 19:50:24 436

原创 vue3学习日记(十八)：状态管理

Vue3状态管理推荐使用Pinia替代Vuex，它提供更简洁API和更好的TS支持。Pinia核心概念包括Store、State、Getters和Actions，适用于全局状态共享、跨组件通信等场景。建议新项目首选Pinia，合理拆分模块，结合Vue Devtools调试，避免过度使用状态管理。

2025-09-19 19:46:26 600

原创 vue3学习日记(十七)：动态路由使用解析

本文介绍了Vue动态路由的核心概念与实现方法。重点讲解了通过vue-router的addRoute方法动态添加路由规则的流程，包括路由定义、参数获取和典型应用场景（权限控制、懒加载等）。同时指出了使用中的注意事项，如路由重复、导航守卫顺序等问题。文章还提供了优化建议：模块化管理、持久化存储、异步加载和TypeScript支持等。动态路由特别适合复杂权限和多租户系统，合理设计可提升应用扩展性和安全性。

2025-09-18 20:08:01 326

原创 vue3学习日记(十六)：路由配置详解

Vue3路由配置指南：VueRouter4提供完整路由解决方案，包括基础路由配置、动态参数匹配、嵌套路由和权限控制。通过路由懒加载优化性能，利用导航守卫实现权限管理，支持编程式导航和滚动行为控制。提供History和Hash两种路由模式，可结合过渡动画增强用户体验。建议采用模块化配置、TypeScript类型检查和性能监控，适用于单页应用开发、权限系统和复杂布局管理场景。

2025-09-18 16:40:52 689

原创 vue3学习日记(十五)：Vue组件传值全攻略

Vue3组件传值方式汇总：1.Props父传子单向数据流；2.Emit子传父事件触发；3.v-model双向绑定语法糖；4.Provide/Inject跨层级共享；5.事件总线实现任意组件通信；6.Pinia/Vuex状态管理复杂应用；7.路由参数页面传值；8.本地存储持久化传值；9.$attrs属性透传。建议根据场景选择：简单通信用props/emit，复杂状态用Pinia，跨层级用provide/inject，注意类型安全和性能优化。

2025-09-17 15:46:07 862

原创 vue3学习日记(十四)：两大API选型指南

Vue3提供了Options API和Composition API两种核心方案。Options API采用传统对象声明方式，通过data、methods等选项组织代码，适合简单项目和新手；Composition API基于函数式编程，通过setup()和响应式API实现逻辑复用，更适合复杂组件和TypeScript项目。两者可混合使用，开发者可根据项目规模、团队经验和需求灵活选择：简单场景用Options API，复杂逻辑用Composition API，并注意各自的最佳实践方式。

2025-09-17 14:40:13 688

原创 vue3学习日记(十三)：内置特殊元素与内置的特殊Attributes详解

摘要：Vue.js内置特殊元素包括动态组件(component)、内容分发(slot)和逻辑容器(template)。动态组件通过is属性切换，需注意状态缓存和安全性；插槽分为默认、具名和作用域三种，用于灵活内容分发；template作为逻辑容器配合指令使用且不渲染DOM。关键属性key用于强制重新渲染，ref用于DOM/组件引用，is支持动态渲染。建议优先使用组合式API，合理应用keep-alive缓存，注意类型安全和代码可读性，特别在动态组件和插槽场景中需进行充分测试验证。

2025-09-16 17:06:44 794

原创 vue3学习日记(十二)：内置组件详解

Vue3内置组件解析：提供开箱即用的核心功能，包括Transition（单元素动画）、TransitionGroup（列表动画）、KeepAlive（组件缓存）、Teleport（DOM挂载控制）和Suspense（异步状态管理）。这些组件支持常见场景如路由切换、弹窗动画、异步加载等，通过合理组合使用可显著提升开发效率和用户体验，但需注意组件特性（如缓存限制、动画条件）以避免常见问题。

2025-09-16 14:25:27 1033

原创 vue3学习日记(十一)：自定义指令详解

Vue3自定义指令详解：Vue3允许开发者通过v-directive扩展HTML功能，提供全局和局部两种注册方式。指令包含7个生命周期钩子，接收el、binding等参数。典型应用场景包括自动聚焦、权限控制、防抖节流和拖拽功能。使用时需注意避免过度使用、遵循命名规范、做好性能优化（如事件解绑）及处理动态参数。建议将复杂逻辑优先使用组件实现，指令仅用于底层DOM操作，在迁移项目时需注意生命周期钩子名称变更。

2025-09-15 15:09:24 792

原创 vue3学习日记(十)：内置指令详解

Vue3常用内置指令包括：v-text/v-html处理文本/HTML内容，v-show/v-if控制显示，v-for循环渲染，v-on/v-bind处理事件/属性绑定，v-model实现双向绑定。此外还有v-slot、v-pre、v-once等特殊用途指令。使用需注意：v-if优先级高于v-for，避免XSS风险，合理选择v-show/v-if，v-for必须加key，自定义组件v-model需遵循新规范。这些指令为模板开发提供了强大支持，合理使用能提升开发效率和性能。

2025-09-15 11:16:22 732

原创 vue3学习日记(九)：辅助类api详解

Vue3组合式API实用工具对比：useAttrs()用于访问非props属性，实现属性透传；useSlots()管理插槽内容，支持条件渲染；useModel()简化v-model双向绑定（3.3+）；useTemplateRef()获取DOM/组件引用；useId()生成唯一ID。各API适用于不同场景，需注意版本要求和特定使用限制，如useModel()需Vue3.3+，useAttrs()对象为只读等。这些工具能有效提升组件开发效率和灵活性。

2025-09-14 12:00:00 423

原创 vue3学习日记(八)：生命周期与钩子函数详解

Vue3生命周期钩子函数详解：介绍了Vue3在Composition API下的核心生命周期钩子，包括setup()替代beforeCreate/created，以及onBeforeMount、onMounted等阶段的具体使用场景和注意事项。重点说明了各钩子的触发时机、典型应用（如DOM操作、状态管理）和常见问题（如异步处理、性能优化）。特别强调了onBeforeUnmount的清理作用和与<keep-alive>相关的特殊钩子，并提供了完整代码示例展示组合式API的生命周期实践。

2025-09-14 11:00:00 1093

原创 vue3学习日记(七)：进阶函数详解

摘要：Vue3提供多种响应式工具：shallowRef/shallowReactive创建浅层响应式数据，仅追踪顶层变化；customRef支持自定义响应逻辑；markRaw/toRaw处理非响应式数据；effectScope集中管理副作用。这些API适用于性能优化（避免深层响应式转换）、高级控制（自定义依赖追踪）和资源管理（批量清理副作用）等场景，使用时需注意不同API的触发条件和限制。

2025-09-13 10:15:10 1104 1

原创 vue3学习日记(六)：工具函数详解

Vue响应式API工具函数摘要：isRef()检查是否为ref对象；unref()自动解包ref值；toRef()将响应式属性转为ref并保持同步；toValue()(Vue3.3+)支持ref和getter转换；toRefs()转换整个响应式对象。类型检查函数包括isProxy()、isReactive()和isReadonly()。最佳实践：优先使用专用检查函数，避免频繁调用影响性能，toRefs()慎用于大型对象。这些工具函数可安全处理响应式数据，简化组合式逻辑开发。

2025-09-13 08:00:00 392

原创 vue3学习日记(五)：watch与watchEffect用法详解

Vue3中watch与watchEffect的核心区别在于：watch需显式指定监听源，能获取旧值，适合精确监听；watchEffect自动追踪依赖，立即执行，适合简单副作用。watch支持深度监听和多源监听，watchEffect则根据访问自动追踪依赖。computed用于派生状态，而watch/watchEffect用于执行副作用。建议：需要旧值或精确控制时用watch，简单依赖用watchEffect。注意性能优化，可使用清理函数处理定时器等副作用。合理选择API能更高效管理响应式逻辑。

2025-09-12 12:00:00 546

原创 vue3学习日记(四)：计算属性computed解析

Vue3计算属性详解：通过computed函数定义，支持getter/setter，基于响应式依赖缓存结果。使用时需注意：保持纯函数特性，依赖响应式数据，避免复杂计算。在组合式API中需暴露给模板，TypeScript建议显式声明类型。计算属性适用于派生状态，不适合有副作用的操作。

2025-09-12 08:00:00 624

原创 vue3学习日记(三)： setup()函数用法详解

Vue3的setup()函数是组合式API的核心入口，用于组件初始化。它接收props和context参数，通过ref和reactive管理响应式数据，使用on前缀访问生命周期钩子。关键点包括：props需用toRefs保持响应性，context可直接解构；必须返回模板所需数据；this不可用；注意异步处理和TypeScript类型定义。setup()使代码组织更灵活，适合复杂逻辑封装，但需注意避免破坏响应性。

2025-09-11 14:51:20 469

空空如也

空空如也