- 博客(61)
- 资源 (1)
- 收藏
- 关注
原创 专题 React学习路线图完整指南
本学习路线图旨在帮助具有Vue.js基础的开发者系统性地学习React框架,通过10周的结构化学习,实现从Vue开发者到React开发者的完整转换。🔧比喻:自定义Hook像是工具箱里的专用工具// 自定义Hook:数据获取try {if (!}, [url]);// 自定义Hook:本地存储try {});try {🛠️实战项目:实时聊天应用WebSocket连接管理消息发送和接收在线用户列表消息历史记录连接状态指示📝。
2025-07-22 14:48:47
867
原创 专题 前端面试知识梳理大全
本文是一份前端面试知识梳理大全,旨在系统化整理不同层级前端工程师的面试要点。内容涵盖初级(1-2年)、中级(3-5年)和高级(5年以上)工程师的面试题目,并按题型和技术栈分类。 文章详细解析了JavaScript核心概念,包括数据类型检测(7种基本类型和对象类型)、闭包的定义与典型应用场景(模块化、柯里化、防抖节流等)、以及原型和原型链机制。每个知识点都配有标准答案、代码示例和扩展要点,并标注了难度和面试频率。 该资源适用于准备阿里、腾讯、字节等一线互联网公司面试,将持续更新最新技术趋势和面试题目,帮助开发
2025-07-22 10:01:05
882
原创 专题 前端工程化指南
本文是一份系统完整的前端工程化学习指南,主要内容包括: 适用人群:面向有基础的前端开发者、转岗工程师、技术负责人和求职者,提供从入门到专家的学习路径。 学习目标:掌握工程化核心价值、工具使用、方案设计、流程优化和问题解决能力。 学习规划:分为入门基础(1-6周)、进阶实战(4-14周)和专家阶段(持续学习)三个层次。 核心内容体系: 工程化基础认知与发展历程 构建工具、包管理等核心工具 CI/CD、自动化测试等流程 企业级项目实战经验 微前端、组件库等架构设计 重点工具技术:涵盖Webpack/Vite、n
2025-07-22 09:59:31
834
原创 专题 原型与继承完全指南
本文通过生动比喻和代码示例,深入浅出地讲解了JavaScript中的原型和继承机制。文章将原型比作"DNA密码"和"工厂模板",原型链比作"家族族谱",形象解释了prototype、__proto__等核心概念。详细介绍了多种继承实现方式(原型链继承、构造函数继承、组合继承等)及其优缺点,并提供了现代开发的最佳实践建议。全文采用"比喻+代码+图解"的形式,让抽象概念变得直观易懂,适合希望在JavaScript面向对象编程方面进阶
2025-07-18 14:21:22
647
原创 专题 闭包理解版
JavaScript闭包的形成依赖于词法作用域机制。当内部函数被定义时,就会静态确定其可访问的外部变量,并持有对外部函数词法环境的永久引用。即使外部函数执行完毕,这个引用仍会使相关变量免于垃圾回收,从而允许内部函数持续访问外部变量。这种机制通过[[Environment]]属性实现,确保函数在创建时就固定了作用域链,不随调用位置改变。闭包的本质就是内部函数长期保持对外部环境的引用链,这一特性使JavaScript能够实现变量状态的持久化保存。
2025-07-18 09:41:16
615
原创 专题 函数闭包
闭包是函数及其词法环境的组合。词法环境指函数定义时的作用域,由源代码位置决定,在程序运行中保持不变。JavaScript通过静态作用域解析变量:先在局部环境查找,再到词法环境中逐层搜索。Chrome的[[Scopes]]属性展示了函数的词法环境链。闭包的关键在于保留函数退出时的局部环境(当外部存在引用时),这通过内部[[Environment]]属性实现。典型应用如函数工厂、私有变量等,体现了JavaScript强大的封装能力。理解闭包需要掌握词法环境、作用域链和垃圾回收机制的关系。
2025-07-15 17:11:51
452
原创 专题 函数参数
摘要:函数的元数指其参数数量,可通过JavaScript的length属性获取。arguments对象能获取实际传入参数,但操作复杂。剩余参数(...)更灵活地收集不定量参数,如函数showStudentInfo()所示。扩展运算符(...)则相反,将数组等可迭代对象转为参数列表,如Math.min(...nums)的应用。两者都是ES6引入的重要特性,分别解决了参数收集和展开的问题,使函数处理更灵活高效。
2025-07-15 15:30:40
267
原创 专题 JavaScript 函数基础
函数声明和表达式是JavaScript中定义函数的两种方式。函数声明会被提升,可以在定义前调用;而函数表达式不会提升,必须先定义再使用。函数表达式可以创建匿名函数,常用于回调模式。立即调用函数表达式(IIFE)在定义后立即执行,可用于创建独立作用域。this关键字指向调用函数的对象,在全局环境中指向window对象。理解这些概念对掌握JavaScript函数机制至关重要。
2025-07-14 15:22:31
383
原创 专题 字符串 方法
本文介绍了JavaScript中常用的字符串操作方法:1. 大小写转换:toLowerCase()和toUpperCase();2. 去除空格:trim()、trimStart()和trimEnd();3. 搜索字符串:indexOf()和lastIndexOf()的使用方法及参数说明;4. 分割字符串:split()方法及其参数;5. 字符串切片:slice()和substring()的区别,包括对负参数的处理方式。文章通过具体代码示例展示了这些方法的实际应用效果。
2025-07-14 10:06:09
598
原创 专题 字符串 Unicode
摘要:本文介绍了Unicode和UTF11-16的区别,以及JavaScript中处理字符串的相关方法。Unicode是字符集,UTF-16是可变长度编码方案(16或32位)。JavaScript使用UTF-16存储字符串,将其视为16位代码单元序列。charCodeAt()返回指定位置的代码单元值,而codePointAt()能正确处理代理对字符。字符串length属性返回的是代码单元数量,而非实际字符数。。。。
2025-07-11 17:07:27
395
原创 专题 数字(number)数学对象
JavaScript数学函数摘要:介绍了Math对象的常用功能,包括数学常数(PI≈3.1415,E≈2.7182)、数值处理方法(min/max比较、四舍五入round)及其他实用函数。重点说明:min/max需逐个参数传递;round()对0.5向上取整;abs()取绝对值;random()生成0-1随机数;三角函数(sin/cos/tan)使用弧度制,需注意浮点精度问题。文中特别指出round(-1.5)会返回-1而非-2的特殊情况。
2025-07-11 09:37:01
328
原创 专题 数字(Number)方法
JavaScript数字格式转换方法总结: toPrecision() - 按有效数字位数四舍五入,参数范围1-100,不足位数会用科学计数法表示 toFixed() - 按小数位数四舍五入,默认保留0位小数 toExponential() - 转换为科学计数法,可选参数指定小数位数 toString() - 可转换数字进制,支持二进制(2)、八进制(8)、十六进制(16)等 注意:调用这些方法时要注意语法格式,如58.toPrecision()需写成58 .toPrecision()避免小数点歧义。进制转
2025-07-11 09:12:06
471
原创 专题 数字(Number)基础
JavaScript数字类型包含整数和浮点数,所有数字都以IEEE-754双精度浮点格式存储。文章介绍了数字原语与Number对象的区别,Math.floor()和Math.ceil()方法的使用,科学记数法的表示方法(如1e3=1000)。重点讲解了特殊数字NaN和Infinity的特性,以及如何通过Number()、parseInt()、parseFloat()和一元加运算符进行类型转换。最后介绍了检查特殊数字的方法isNaN()和isFinite(),特别指出两个NaN值不相等的重要特性。
2025-07-10 17:47:48
373
原创 十二 进阶
本文系统梳理JavaScript核心知识点,将从基础数据类型开始讲解,逐步深入function、数组和对象等进阶内容,进行详细解析和剖析。通过对JavaScript知识体系的完整梳理,帮助开发者扎实掌握语言基础,为后续学习打下坚实基础。
2025-07-10 15:14:20
383
原创 十一 Javascript的按值传递
摘要: JavaScript严格采用按值传递机制,无论是原始值还是对象。对于原始值,直接复制值本身;对于对象,复制的是其内存引用(即地址值)。这意味着修改对象属性会同步影响所有引用该对象的变量,但重新赋值变量(如obj = 20)不会影响其他变量,因为它们存储的是独立的引用副本。JavaScript不支持传统意义上的按引用传递,无法通过传递变量引用直接修改变量本身的值。例如,obj和obj2共享同一对象时,修改obj.x会反映在obj2.x中,但直接重赋值obj不会改变obj2的值。
2025-07-10 15:03:23
646
原创 十 JavaScript 作用域
摘要:JavaScript标识符的作用域决定了其可访问性,分为四种:全局、局部(函数)、块级(ES6引入)和模块作用域。全局标识符在整个程序中可用,而局部标识符仅限于定义它们的函数内。ES6新增的let/const带来了块级作用域,限制标识符仅在代码块内有效。标识符阴影是指局部变量覆盖同名全局变量。理解作用域能避免在无效位置访问变量,优化代码结构并减少错误。
2025-07-09 09:25:26
483
原创 九 Javascript 运算符初识
JavaScript运算符摘要 JavaScript运算符分为一元、二元和三元运算符,用于执行各种运算操作。算术运算符(+、-、*、/、**、%)处理数值计算;字符串运算符(+)用于连接字符串;关系运算符(==、===等)比较值的大小或相等性;逻辑运算符(!、||、&&)处理布尔逻辑;空值合并运算符(??)专门处理null/undefined情况。赋值运算符包括基本赋值(=)和复合赋值(+=等)。运算符具有优先级和结合性规则,||和&&是短路运算符,而??需要谨慎与其他运算符
2025-07-08 16:27:43
728
原创 八 JavaScript 函数初识
本文摘要:JavaScript函数是可重复调用的代码块,用于执行特定任务。函数通过function关键字定义,可接受参数(形参)并在调用时接收实际值(实参)。函数使用return返回值,遇到return会立即终止执行。当实参数量与形参不匹配时,JavaScript会灵活处理:多余实参被忽略,缺少实参则设为undefined。通过参数验证可确保函数正确执行。函数既能封装代码逻辑,又能提高代码可读性和复用性。
2025-07-08 14:42:04
781
原创 七 JavaScript 控制流
JavaScript控制流简明指南 控制流指程序执行的流程方向,由条件结构和循环结构驱动。条件结构(如if/else、switch)根据布尔表达式决定代码执行路径;循环结构(如for、while)重复执行代码块直到条件不满足。 关键要点: 条件语句: if执行条件为真的代码块 else对应if条件不满足时的执行 switch通过case匹配执行不同代码块,需配合break使用 循环语句: for循环适合已知次数的迭代,通过计数器变量控制 while循环适用于未知次数迭代,仅需终止条件 数组遍历时for循环常
2025-07-08 11:49:52
1209
原创 六 数据类型 (简短介绍) 下篇
本文介绍了JavaScript中的三种对象数据类型:数组、函数和普通对象。数组是有序的元素集合,可通过索引访问;函数是可执行代码块,可接受参数并返回值;普通对象是键值对的集合,包含属性和方法。文章还讲解了typeof运算符的返回值规则:对原始值返回类型名称,对对象返回"object"(函数返回"function"),null则返回"object"(这是JavaScript的历史遗留问题)。这些数据类型构成了JavaScript编程的基础。
2025-07-08 11:13:04
1135
原创 五 数据类型 (简短介绍) 上篇
摘要:JavaScript数据类型分为原始值和对象两大类。原始值包括7种类型:undefined、null、数字、字符串、布尔值、Symbol和BigInt。数字不分整数和浮点,统一为number类型;字符串可通过索引访问字符和使用length属性;布尔值仅有true/false两种值。特别的是,虽然原始值本身无属性,但通过自动装箱机制,JavaScript会将原始值临时包装为对应对象类型(如String)以访问属性。这种设计既保持了原始值的简洁性,又提供了对象操作的便利性。
2025-07-08 10:34:23
671
原创 三 JavaScript 变量
事实上,对于新手开发人员来说,了解 var 工作原理以及它与 let 的区别非常重要,这样才能真正体会到 let 在某些用例中的威力,同时也要意识到没有理由相信 var 性能可能比 let 差。那么对我们来说,这意味着如果我们在检查给定变量时得到 typeof 返回的 ‘undefined’ ,那么我们就不能肯定该变量不存在。var 关键字后面跟着要创建的变量的名称(表示为 variableName ),后面跟着等号( = ),后面跟着要分配给变量的初始值(表示为 value )。非相等运算符,表示为!
2025-07-08 10:32:24
514
原创 二 Javascript 入门
JavaScript代码可以通过<script>标签嵌入HTML文档的<head>或<body>中。示例展示了在<body>中使用document.write('Hello World!')输出文本,其中document是HTML文档对象,write是其方法。当JavaScript代码量较大时,建议使用外部.js文件,通过<script>标签的src属性引入。摘要简要说明了JavaScript的基本编写方式和对象方法的概念。
2025-07-08 10:31:18
294
原创 封装一个简单的小日历组件,可以在日历上点击任务并展示
利用饿了吗的日历组件,封装一个简单的小日历组件,可以在日历上点击任务并展示,多任务可点...展示全部
2024-08-07 10:28:50
502
原创 【案例】基于 vue-search-highlight的可跨标签的全文本定位标注展示方案
自定义 cross-text-highlight组件。基于vue-search-hightlight的可跨标签的全文本定位标注展示方案
2024-08-07 09:42:22
928
原创 记录饿了吗组件el-date-picker 的时间范围问题
做气象开发发布预警有一个需求就是发布时间只能选择当前时间的2小时以内的,那么就有一个跨天的问题需要思考。先控制当前天的选择问题 利用 el-date-picker 的picker-options。那么得知道什么时候可以跨天,......
2022-08-03 18:09:51
523
原创 关于用element表格组件自定义表头的时候,里面用不了data里面的其他数据解决办法
<el-table-column label="bi" prop="bi" align="center"> <!-- 不使用slot 用#代替 --> <template #header> <span> {{ accountName }}面积占比</span> </template></el-table-column>我这里如果想使用data里面的accountName 这个变量的时候 如果
2022-04-26 14:56:18
796
1
原创 Array对象的实用方法总结
2.Array 对象静态方法Array.isArray()作用: 方法返回一个布尔值,表示参数是否为数组var arr = [1, 2, 3];typeof arr // "object"Array.isArray(arr) // trueslice()作用: 用于提取目标数组的一部分,返回一个新数组,原数组不变 arr.slice(start, end); 它的第一个参数为起始位置(从0开始,会包括在返回的新数组之中),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果
2021-08-04 10:20:57
238
原创 javascript高阶函数的基础应用
关于高阶函数的使用,之前一直都模模糊糊,今天总结下使用方便记忆常用的3个filter ,map ,reduce//1.将数组中小于100的数字返回,并将这些数字乘以2 然后将他们的总和计算出来 let arr = [1, 4, 5, 10, 53, 112, 786, 211, 13, 235, 246, 26, 213, 6]; //将符合条件的过滤 let newarr = arr.filter(function (n) {
2021-04-22 09:21:31
175
1
原创 用vue随便写一个购物车小例子
html部分<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &
2021-04-21 22:23:46
182
原创 thinkphp6+腾讯云
开发要用到腾讯云的短信,自己就注册申请了一个按流程来走准没错接下来审核通过的话可以在这两个地方查看具体的内容,涉及隐私不过多展示了然后使用线上的API Explorer在线调用,这里需要注意的是不要勾选只看必填参数,因为我这里是验证码业务,需要带上参数所以有一些选填的内容也要填PhoneNumberSet.N 这里国内的话(我暂时用不到国际) 开头+86138xxxxxxxxTemplateID 这个自己看模板上面的idSmsSdkAppid 这个是签名上面的AppidSign
2021-04-07 15:38:16
3265
7
原创 thinkphp6发布线上所踩的坑
最近在自己的服务器上搭建thinkphp6并自己写点小玩意,昨晚踩雷就来记录下吧线上环境lnmp linux8.+ nginx 1.18 mysql8.0 php7.4打开咱tp6的手册安装稳定版本tp6composer create-project topthink/think tp(名字随你了)接下来是多应用模式跟模板引擎单应用模式基本公司线上是用不到的多应用模式composer require topthink/think-multi-app模板引擎如果不开的话,在多应用下
2021-03-19 11:34:06
809
2
原创 phpstorm远程连接服务器并实时更新发布代码(thinkphp6.0.7)
想要phpstrom 远程连接上服务器Step1打开phpstorm Tools->Deployment->ConfigurationStep2开始配置连接参数,我的是阿里云的服务器,有一个 Test Sftp connection 测试连接的可以先测试下选择yes接下来Step3: Text-to-HTML conversion tool后面继续连接到你的服务器,并next到最后即可...
2021-03-17 09:00:56
4408
2
原创 准备出去玩,高德导航来帮忙,高德第二话
临近清明小长假,突发奇想就想自驾去洛阳,然后在高德上一顿操作,600多公里是真的远啊。。。。使用高德地图js api 看看路线规划获取驾车规划数据有两种,一种是根据坐标点来进行,第二种是根据关键字来获取驾车规划数据根据坐标点吧没什么必要了,我们来展示根据关键字来获取驾车规划<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <
2021-03-02 16:37:42
297
原创 Redis的常用命令实操第一篇 基础操作 不仅仅是列举还有用法
Redis的常用命令实操,因为我用的cmder顺带说一下它的安装cmder用起来真的很舒服 ,cmder的安装-> 链接: cmder.有完整版跟迷你版,当然选择完整的啦,解压之后放在C盘应为是安全的应用程序,咱们直接将cmder.exe创建桌面快捷方便使用,也可以在任务栏,ctrl + ` 来唤醒推荐一个文档链接: 文档.KEYS 命令#基本语法 KEYS pattern#查询所有 有趣的是按key之后再按tab就会有惊喜KEYS * #KEYS 的速度很快,但在一个大
2021-02-10 10:38:57
1247
2
原创 Redis下载(window+linux)
Rediswindows 版本下载链接: windows 版本.linux的话直接官网下载链接: linux版本下载.window下载,我下载的是msi的如果是zip的版本,直接解压完事next到底然后去任务管理器看下,目前已经开启redis服务接下来运行服务玩玩因为之前我是装在D盘,所以得转到D盘的redis目录下redis-server.exe redis.windows.conf (指定配置文件)默认端口号6379然后redis-cli.exe进来...
2021-02-02 09:14:12
313
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅