- 博客(54)
- 收藏
- 关注
RSS订阅原创 ES6新特性：集合数据结构Set和Map；可选链和空值合并
访问到null/undefined就短路返回undefined，跟&&类似，但是&&对0、空值，false都算短路，而可选链?类似 || 的兜底，但是 || 会对0、空值，false兜底，而空值合并?Set是可迭代对象，可以使用for of，扩展运算符，转化真数据Array.from方法等需要迭代器的方法。即弱引用不会被引用计数算值，当其他地方没有引用时，引用计数算作0，该对象会被回收。JS的弱引用同C#不同，采取的是标记清除的机制，并不是引用计数。属性：size（元素个数，类似数组的length）
2026-11-11 15:23:48
3
原创 ES6新特性：对象代理Proxy和模块Module的import/export
Proxy是一个类，创建的时候传入代理的对象和配置项对象，用于监听对象获取，设置，删除等操作，对这个代理进程相应操作时，触发监听函数完成响应操作。导入指定：import { xxx as xxx } from '文件路径'导入：<script src='index.js' type='默认导出：export default { }导入默认：import xxx from '文件路径'获取时触发函数：get（）{ }设置时触发函数：set（）{ }
2026-11-11 14:58:23
14
原创 ES6新特性：Promise对象、async/await语法糖
解决回调地狱的Promise对象：本质：该对象承诺会返回一个结果通知，执行函数是同步的，但返回通知后再执行的函数（.then）是异步的Promise 对象内部只有一个状态，初始状态为pendingfulfilled状态：对象内部调用resolve（）后进入成功状态rejuected状态：对象内部调用reject（）或抛出异常后进入实例方法：then只写一个函数时，默认onFulfilled函数，拿到resolve（）里的value作为onFulfilled函数的。
2026-11-11 11:33:56
27
原创 ES6新特性：类
注意,这个语法糖的寄生组合继承不是通过拷贝父类原型实现的，而是通过原型链委托（这种方式能让内置类型也继承，像基本类型Array仍然可以调用.length方法）class 类名 extends 父类名{ //js只能继承自一个父类，要继承多个父类用混合/混入/组合实现。super（父类方法所需参数） //super方法注明继承来自父类的属性和方法。constructor(参数列表 //构造时传入的参数）{this.属性名= 参数 //绑定this操作。
2026-11-10 15:00:59
67
原创 ES6新特性：箭头函数
不再需要写短路运算（如name = name || 'Askeladd'）直接在定义的时候写参数默认值，不传参或者传undefined则会自动使用参数默认值。this的词法绑定：箭头函数没有自己的this，它的this值由外层的词法环境决定（即指向创造它的词法环境）获取传入的参数（形参的时候可以在参数列表写上剩余参数用来收集参数，后续可以访问这个真数组获取参数，例如。高阶方法：例如数组的高阶方法，一般都是纯函数（不影响外界的变量）写成箭头函数十分直观。箭头函数和传统函数的区别。箭头函数的参数默认值。
2026-10-28 14:59:04
185
原创 ES6新特性：let、const、块级作用域
老的var还是归变量环境管（规则基本相同，只是[[scope]]改为了[[Environment]],且这个属性不再存整个作用域链，而是单纯只存外层环境（即创造它的环境），在执行时候，通过outer指针将所有的[[Environment]]串起来形成作用域链）而let则归词法环境管（大括号会创建类似于函数作用域的词法作用域，let会被限制在这个词法作用域中，而函数创建的函数变量作用域可以限制var但大括号的词法环境不行）这是因为es6的新特性中，重构了以往的执行上下文vo和ao的架构。
2026-10-27 17:18:59
121
原创 浏览器的渲染原理
预解析线程：并行获取和解析外部css文件，以减少阻塞，提高html执行效率（此外还会预解析js文件）css解析不会直接阻塞html解析，单js解析会直接阻塞html解析。每个节点都从属于某个图层，当页面变化时，不需要重新绘制整个页面，只需绘制对应改变节点所在的图层即可（有些操作会触发单独分层，比如。确定每个节点的几何信息（如相对单位），最终生成一颗布局树（dom树和布局树会不一样，因为有些节点的几何信息是隐藏的）分块完成后，所有瓦片会提交到gpu进程，由gpu进程生成位图，这个过程会使用gpu加速。
2026-09-03 16:27:20
195
原创 惰性函数：首次调用后改变自身
兼容性检测：例如跨浏览器事件绑定，有dom0和dom2标准，首次判断环境后，确定使用哪种协议，后续就一直使用，避免了if一直判断。初始化操作：特定功能的计算不适合放在页面初始化中，浪费资源，像一些点击操作，用户不点击就不需要初始化的数据，就可以使用惰性函数。
2026-09-03 11:20:01
165
原创 函数管道：消除深度嵌套调用
函数管道输入的函数必须是纯函数，函数管道会将输入的函数依次调用，前一个函数的结果是后一个函数的参数，所以输入的函数参数也得是单参函数。复杂表单数据清洗与格式化（例如用户输入后需要对输入内容进行敏感词屏蔽，消除空格等多方位操作）UI 展现层的数据链式转换（如列表筛选与计算，筛选数据后需要对数据重排列等操作）避免了f（f（f（f（））））这样的深度嵌套调用，方便阅读。
2026-09-03 11:12:40
184
原创 多参函数的参数固定：科里化
通过递归不断收集参数，直到达到原函数要求的参数数量时统一触发执行。向科里化工具函数传入一个多参函数和需要固定的参数。若传入的固定参数足够了，则直接执行多参函数。利用闭包缓存已传入的参数。实现减少参数，甚至变为单参函数的效果。返回一个固定了传入参数的传入函数。
2026-09-03 10:49:49
210
原创 性能优化：节流
当一个事件频繁触发时，节流会限制这个事件在一定时间内只能触发一次，它控制函数的执行频率，确保在设定的时间间隔内，函数只执行一次。当计时任务完成时，将计时器设置为null或undefined（延迟执行，停止后还会触发一次）若大于，则执行触发函数，且记下这一次执行的时间戳。若存在计时器，则直接return不执行。用现在时间戳减掉上一次的时间戳。保存上一次执行的时间戳，判断。若小于间隔时间，则不执行。
2026-09-02 10:31:54
155
原创 性能优化：防抖
或者使用apply，这时又要使用闭包了，因为要拿取的是返回函数的arguments，需要先存好这个arguments，然后在相应操作的。执行代码调用apply通过闭包使用外部存的这个arguments（如果不存，那由于apply是在相应操作的。使用时，先使用函数得到返回的函数，再在事件触发的时候调用这个返回的函数。执行代码（写callback参数，在事件触发的时候再传入具体的操作函数）的函数。当一个事件被频繁触发时，只有等到事件触发停止一段时间后，才执行相应的操作。防抖函数的内部定义计时器变量。
2026-09-01 17:12:12
164
原创 事件循环：事件队列的优先级
宏任务和微任务的区别：执行栈中以宏任务为单位，其内部可以创建同步代码，微任务以及新的宏任务。微任务就是一个加急待办，在同步代码执行完成后就执行，而新的宏任务就是一个普通待办，只有宏任务全都执行完毕了才会执行新的宏任务（宏任务执行完毕条件：微任务队列清空）由于js的单线程执行引擎，有些代码的处理要交付给其他线程执行，需要等待时间，就需要通过异步代码，创建宏任务和微任务，放到事件队列中，在合适的时机（上一个宏任务执行完毕，且微队列清空），将事件队列里的代码依次推入执行栈中执行，这就是事件循环。
2026-09-01 16:40:27
153
原创 BOM对象
replace(url):跳转到指定url(不会保存到历史记录中)assign(url):跳转到指定的url(会保存到历史记录中)setTimeout(函数,倒计时毫秒)时间到了执行，返回一个计时器的编号数字。open(页面路径,打开目标,windowFeatures)：打开新窗口。origin:当前url的来源部分(协议、主机名、端口)confirm(提示内容字符串)确定返回ture,取消返回false。clearTimeout(timer)：清除计时器。reload()：重新加载页面。
2026-08-26 15:42:36
182
原创 DOM对象：元素事件
target:事件源,触发事件的元素（无论事件是注册给谁的，target一定是目标阶段的事件源（比如父元素注册事件，子元素无事件注册，点击子元素，点击事件冒泡到父元素，触发父元素事件，target仍旧是指向子元素））事件委托：由于时间冒泡且target永远是触发元素的事件，因此给父元素注册事件，通过判断target不同来源，分别设置不同的事件处理程序，称为事件委托。当一个事件触发时，浏览器会创建一个与该事件相关的事件对象，该对象包含大量有用信息，比如事件的类型，触发的元素，鼠标的坐标等等。
2026-08-22 17:24:12
202
原创 DOM对象：操作元素
document.createDocumentFragment()文档片段节点：临时存放的节点，在大量改写文档的时候的缓冲区，改完了才会被放入到文档流中，避免多次重复渲染页面。克隆元素：node.cloneNode(bool)参数传入true是深拷贝（拷贝节点本身以及它的所有子节点和子孙节点），否则是浅拷贝（保留标签和所有属性，内容为空）除了innerHTML会解析html的标签输出为对应结构，其他则不解析，且在看源代码中，对应文本会以实体的方式呈现（即转义，从而不解析为html结构）
2026-08-20 11:10:39
180
原创 DOM对象:元素的获取
name属性：document.getElementsByName("标签name属性")Name值几乎只有在表单会用。标签名：*document.getElementsByTagName("标签名")返回一个伪数组。节点属性：tagName（元素名）、nodeName（节点名）、nodeValue、nodeType。类名：*document.getElementsByClassName("类名")节点不只有元素节点，在如果用node获取，空白、文本和注释也会被获取。子元素节点：.children。
2026-08-19 10:41:07
165
原创 js中的错误对象
错误堆栈：错误抛出后没有捕获并处理错误，函数立即终止，函数环境销毁，错误会一直往上抛，抛到上一个执行环境，最后抛到全局环境，还是没有捕获和处理错误，全局环境销毁，程序就停止了。断点调试：为可能出现预期错误的代码打上断点，页面执行到那行代码时会暂停，可以查看当时的变量或参数分别是什么。再通过点击单步执行，执行完那行代码，继续检查执行完毕后，那行代码的变量和参数是否符合预期。错误没有被捕获的话，会继续往上抛，如果错误捕获了，则后续的代码正常进行。逻辑错误：运行结果不符合预期。（单步执行，进入函数，退出函数）
2026-08-18 16:15:07
172
原创 JS中字符串的操作
String.prototype.slice(起始索引，结束索引)复制起始索引到结束索引之间的数据（左闭右开）到一个新字符串，返回这个新字符串。String.prototype.substring()类似slice（），但不可输入负数（即不可反向索引）拆分字符串，返回存放拆分后字符串的数组：String.prototype.split()参数为拆分字符或正则。替换字符串：String.prototype.replace()一参是匹配规则，二参是替换内容。
2026-08-17 15:15:46
227
原创 JS中的正则对象
判断：RegExp.prototype.test()参数传入字符串，查看传入的字符串是否满足RegExp实例对象的正则表达式，返回布尔值（全局模式有个弊端，同一个RegExp实例对象每次使用后索引不重置，只有匹配失败才会重置索引，因为全局模式下会一直往后搜索，光标位置会被记录到正则对象中）一些使用捕获组的函数中，参数分别有match（匹配项）g1，g2（捕获组）index（索引）input（匹配字符串）和groups（具名捕获组对象）捕获组：小括号括起来部分（捕获组嵌套，先计算外部）
2026-08-14 16:09:41
201
原创 JS中的正则对象的引入：正则表达式
懒惰：量词后加上问号表示懒惰匹配，尽可能少地匹配。匹配Unicode字符：\u。匹配n次到m次：{n,m}匹配n次或以上：{n,}字符集：[ ]：匹配符号括号内范围的内容。.:匹配任意字符（\n除外）
2026-08-14 10:24:11
243
原创 JS中的对象的相关概念
深克隆：在对象的属性也是引用类型的时候，也要深克隆那个引用类型（通过递归，某个值是引用类型的时候，把这个值当做一个对象，然后这个对象进行克隆，即新建一个对象，然后把引用类型的值（非地址）放到这个新建的对象里，这样属性克隆就完成，最后深克隆拿到的是这个新建对象属性的地址（新的副本而非相同引用）。克隆函数传两参数，一个是克隆原对象或原数组，一个是判断是否深克隆，若深克隆，则引用类型的属性也要使用这个克隆函数，传的俩参数一个是克隆原对象的属性（引用类型，也是一个对象或数组），一个是true（确认深克隆）
2026-08-13 16:11:29
196
原创 JS中函数的相关概念
4.函数提升：字面量声明的函数会被提升到代码块的顶部，原因是执行上下文中，确定变量对象中，会将函数名准备好的同时，把函数名指向函数对象（函数对象的创建和这个确认过程是同步的，不会出现函数对象没创建，函数名没法指向的情况），这个过程发生在代码执行前，因此有函数提升（变量提升也是如此）Function.prototype.bind(对象，实参列表)，不执行，创建一个新函数拷贝调用的函数，但改变这个新函数的this为输入的对象。函数会有一个隐藏属性，[[scope]]，指向创建该函数的变量对象。
2026-08-12 16:55:20
144
原创 JS中数组的操作
9.数据查找：Array.prototype.find(func（）)：数组的每一项作为参数传到这个方法的参数函数中，直到参数函数返回true，就停止遍历数组项，并返回这个参数函数true对应的传入的数组项。8.数据筛选：Array.prototype.filter(func（）)：数组的每一项作为参数传到这个方法的参数函数中，如果参数函数返回true，则数组的那一项将被存在新数组中，最后返回新数组。5.拼接数组：Array.prototype.concat(数组1，数组2)
2026-08-11 14:38:06
211
原创 ES6基础特性
定时器方法都返回唯一标识编号id，可以用clearInterval（）方法传入这个id实现清除对应的间隔执行定时器。反引号标记，可通过${}的方式引入外部变量，优于单/双引号用加号链接的形式，并且可以直接换行！——对象：const {username， age：userAge,——数组：const [a, b, c ] = [1, 2, 3]Objuect.assign（{}， objA）（浅拷贝）constructor（必要参数）{Arry.from（）（传入伪数组，变成数组）5.数组和对象的扩展。
2025-05-12 10:00:57
309
原创 发送网络请求
if(aj.readyState(事件进展) === XMLHttpRequest.Done $$ aj.status(状态码) === 200)请求：ins.interceptors.request.use（config => { return config }）响应：ins.interceptors.response.use（res => { return res }）axios.get('URL'),{ params:{键名=键值} }
2025-04-24 16:57:54
410
原创 Git管理
git checkout 分支名 / git switch 分支名。3.给暂存区文件添加说明，并提交到本地仓库。git commit -m 说明。查看状态：git status。git branch 分支名。git merge 分支名。9.合并主分支和对应分支。2.让文件添加到暂存区。
2025-04-22 14:58:44
324
原创 TypeScript十大关键语法
定义变量的时候赋值后，赋值的类型就是变量的类型，不能改变（解决弱引用问题）type关键字定义 type 别名 = 类型1|类型2。限定函数参数，尖括号内是泛型变量，然后让参数列表限定为。的限制即（fn（）：void）进行函数返回值限定。的形式限定，只是限定可以是两个，也可以限定为值。配合，规定变量规则，类型替换为自定义对象名。使用时，让n变为类型，即可处理不同类型。的形式进行确定，确保它一定是该类型。[ 类型1，类型2，类型3（？配合，规定变量规则，类型替换为别名。冒号 类型1|类型2。
2025-04-22 13:37:05
262
原创 Vue3和pinia
ref（响应式数据基本类型）//基于es6的proxy即代理：基本类型值（非对象做响应式处理）更改值用.value，使用还是正常用新建名（其实是把基本类型值放到一个空的ref对象里）比vuex简约，state（数据）被设置为ref（），getters被设置为computed（），action被设置为function。侦听器：watch（监听对象（属性则要设置为函数即 （）=>属性），（newValue，oldValue）=>{监听后执行}）计算属性：computed（（）=>{ return 计算属性}）
2025-03-27 12:03:47
334
原创 todosmvc复刻
1.通过绑定class给一个响应式值（bool类型）确定是否显示样式，如：2.表单用v-module进行数据双向绑定（主要是input）3.label可用v-text单向绑定4.失去焦点执行为@blur5.this.$nextTick（（）=>{}）方法用于在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，能够获取更新后的 DOM。6.监听hash7.$refs对象的使用给元素增加ref特性，可以用$refs.设置的ref名获取对应的元素（少用）
2025-03-26 10:18:32
873
原创 Vue全家桶
router.beforeEach（（to，from，next））{ console.log('路由触发了') next（） }配置路由表：const routes:[ {path:'',name:'',component:},{路径，路由名，显示组件} ]m方法（store，num）{ setTimeout（（）=>{ store.commit（'n方法'，num）}，3000 }
2025-03-24 10:48:04
821
原创 Vue脚手架和组件开发
子：export default{ props：{子组件接值： （对象形式）{ type：[ String，Number ]， defaukt：100 } } }其中，父传值名 = 子接值名。父：<组件名> <template #设置的名字 = "绑定值对象" />{{ 绑定值对象.绑定值名 }} <组件名/>在父组件中设置@自定义事件名称，绑定为父组件某一方法，即可将数据传到父组件。
2025-03-21 16:10:10
321
原创 提高webpack打包速度
在 Vue 中，合成事件（Custom Events）是一种用于组件间通信的机制，它允许子组件向父组件传递数据和触发事件。：HappyPack 也是用于实现多进程构建的工具，它可以将任务分解到多个进程中并行处理。总之，Vue 合成事件的原理是基于事件绑定、触发、传播和处理的一套机制，通过。的回调函数形式，以确保更新是基于最新的状态。方法实现了组件间灵活的通信和交互。在 React 中，类组件的。要解决这个问题，需要使用。
2025-03-10 09:46:14
1859
原创 前端性能优化
图片：精灵图，svg格式，懒加载处理原理：监听图片是否出现在可视区范围，通过监听dom，获取偏移量offsetHeight-屏幕高度若小于scroll top，则出现在可视区范围，先将图片src预处理，给一个很小的预图片地址，给一个自定义的src真实图片地址，当出现在可视区范围，将自定义src赋值给src属性。节流：减少http请求，原理是定时器，既定时间后才请求，执行完清除定时器再开启一个，监听滚动事件。js打包后引用js文件尽可能用defer属性加载，顺序执行，区别async属性，并非顺序执行。
2025-03-10 09:45:56
180
原创 Vue核心语法
v-bind：特性='绑定值'，此外 vue还增强了绑定内联式和class的输出结果，即值不一定是字符串，可以是class/style：v-bind：class="{ 类名：响应式数据 }"和v-bind:style="{ css特性=响应式数据}" }class生效取决于绑定的响应式数据，内联式的值也取决于绑定的响应式数据。，改为change事件（失去焦点后与初始数据不同后触发）后更新数据而非input事件（每次修改数据都触发）
2025-03-10 00:22:00
310
原创 浏览器的循环机制
浏览器的循环机制主要指的是事件循环（Event Loop），它是浏览器实现异步编程的核心机制，用于协调和处理各种任务，确保浏览器能够高效地响应用户操作和执行各种异步操作。以下是对浏览器事件循环机制的详细介绍：事件循环机制使得浏览器能够有条不紊地处理各种任务，保证了页面的流畅性和响应性，让异步操作能够按照预期的顺序执行，避免了阻塞和混乱。
2025-03-09 16:59:39
348
空空如也
可执行文件名是地址吗？
2023-12-06
TA创建的收藏夹 TA关注的收藏夹
TA关注的人