![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
文章平均质量分 73
xiaoLiang o
一个人必须不停地写作,才能不被茫茫人海淹没。
展开
-
JS知识点汇总(十四)--事件循环
同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行,不断重复上述过程就是事件循环。await 会阻塞下面的代码(即加入微任务队列),先执行 async 外面的同步代码,同步代码执行完,再回到 async 函数中,再执行之前阻塞的代码。宏任务的时间粒度比较大,执行的时间间隔是不能精确控制的,对一些高实时性的需求就不太符合。当前宏任务执行完成后,会查看微任务的事件队列,然后将里面的所有微任务依次执行完。Proxy 对象替代)原创 2023-07-05 18:59:37 · 283 阅读 · 0 评论 -
JS知识点汇总(十一)--事件模型
javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等。如上,当希望为同一个元素绑定多个同类型事件的时候(上面的这个btn元素绑定2个点击事件),是不被允许的,后绑定的事件会覆盖之前的事件。由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念。事件捕获与事件冒泡相反,事件最开始由不太具体的节点最早接受事件, 而最具体的节点(触发节点)最后接受事件。原创 2023-07-04 15:59:32 · 229 阅读 · 0 评论 -
JS知识点汇总(十)--事件代理&垃圾回收机制
事件代理(Event Delegation)也称之为事件委托。是JavaScript中常用绑定事件的常用技巧。“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。一个事件触发后,会在子元素和父元素之间传播(propagation)。这种传播分成三个阶段。捕获阶段:从window对象传导到目标节点(上层传到底层)称为“捕获阶段”(capture phase),捕获阶段不会响应任何事件;原创 2023-07-03 14:22:49 · 113 阅读 · 0 评论 -
JS知识点汇总(九)--字符串
两个都为简单类型,字符串和布尔值都会转换成数值,再比较简单类型与引用类型比较,对象转化成其原始类型的值,再比较两个都为引用类型,则比较它们是否指向同一个对象null 和 undefined 相等存在 NaN 则返回 false。原创 2023-07-03 10:09:16 · 116 阅读 · 0 评论 -
JS知识点汇总(八)--typeof& instanceof、Object&Map
所以,null 在 typeof 之后返回的是有问题的结果,不能作为判断null的方法。而 typeof 也存在弊端,它虽然可以判断基础数据类型(null 除外),但是引用数据类型中,除了 function 类型以外,其他的也无法判断。可以发现引用类型数据,用typeof来判断的话,除了function会被识别出来之外,其余的都输出object.如果我们想要判断一个变量是否存在,可以使用typeof:(不能使用if(a), 若a未声明,则报错)a表示对象或原始值的表达式,其类型将被返回。原创 2023-07-02 00:00:09 · 553 阅读 · 0 评论 -
JS知识点汇总(七)--数据类型
JS 中有六种简单数据类型:undefined、null、boolean、string、number、symbolES10中的新特性 BigInt (任意精度整数),目前还处于stage-4阶段,不出意外即将成为js的第七种基本数据类型和第二个数字数据类型。虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的,如果运算子的类型与预期不符合,就会触发类型转换机制强制转换(显示转换)自动转换(隐式转换)原创 2023-06-30 19:26:39 · 174 阅读 · 0 评论 -
JS知识点汇总(六)--作用域链&this
作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合换句话说,作用域决定了代码区块中变量和其他资源的可见性。原创 2023-06-30 17:56:04 · 325 阅读 · 0 评论 -
JS知识点汇总(五)--执行上下文
创建阶段,会在代码中扫描变量和函数声明,然后将函数声明存储在环境中。在 ES6 中,词法环境和变量环境的区别在于前者用于存储函数声明和变量( let 和 const )绑定,而后者仅用于存储变量( var )绑定。可以有任意多个函数上下文,每次调用函数创建一个新的上下文,会创建一个私有作用域,函数内部声明的任何变量都不能在当前函数作用域外部直接访问。执行栈,也叫调用栈,具有 LIFO(后进先出)结构,用于存储在代码执行期间创建的所有执行上下文。只有全局上下文(的变量)能被其他任何上下文访问。原创 2023-06-30 17:36:15 · 364 阅读 · 0 评论 -
JS知识点汇总(四)--闭包&浏览器缓存
若不是某些特定任务需要使用闭包,在其它函数中创建函数是不明智的,闭包会携带包含其它的函数作用域,因此会比其他函数占用更多的内存。一般函数的词法环境在函数返回后就被销毁,但是闭包会保存对创建时所在词法环境的引用,即便创建时所在的执行上下文被销毁,但创建时所在词法环境依然存在,以达到延长变量的生命周期的目的。foo()函数的执行结果返回给bar,而此时变量a仍在使用,还没被销毁,然后执行bar()函数。这个说法来源于MDN-闭包。还有种说法:闭包是指有权访问另外一个函数作用域中的变量的函数。原创 2023-06-30 16:26:16 · 185 阅读 · 0 评论 -
JS知识点汇总(三)
fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。of 是ES6新增的遍历方式,允许遍历一个含有iterator接口的数据结构(数组、对象等)并且返回各项的值,和ES3中的for…offsetTop 返回的是当前元素相对于其 offsetParent 元素的顶部的距离。clientWidth/clientHeight 返回的是元素的内部宽度,它的值只包含。offsetWidth/offsetHeight 返回的是元素的布局宽度,它的值包含。in 获取的是对象的键名;原创 2023-06-30 16:23:24 · 234 阅读 · 0 评论 -
JS知识点汇总(二)
从安全性来说,因为每次http请求都会携带cookie信息,浪费带宽,所以cookie应该尽可能少的使用,另外cookie还需要指定作用域,不可以跨域调用(当前页面只能读取页面所在域的 cookie,即 document.cookie ),限制比较多。undefined 在 JavaScript 中不是一个保留字,可以使用 undefined 来作为一个变量名,但不建议这么做,它会影响对 undefined 值的判断。当使用双等号对两种类型的值进行比较时会返回 true,使用三个等号时会返回 false。原创 2023-06-30 16:04:03 · 347 阅读 · 0 评论 -
JS知识点汇总(一)--数组常用方法
传入三个参数,分别是开始位置,要删除元素的数量,要插入的任意多个元素,返回删除元素的数组,对原数组产生影响。会先创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最终返回新构建的数组,不会影响原始数组。pop() 方法用于删除数组的最后一项,同时减少数组的 length 值,返回被删除的项。shift()方法用于删除数组的第一项,同时减少数组的 length 值,返回被删除的项。传入两个参数,分别是开始位置,删除元素的数量,返回包含删除元素的数组。数组基本操作可以归纳为 增、删、改、查。原创 2023-06-30 15:26:19 · 107 阅读 · 0 评论 -
数组扁平化(递归和非递归实现)
数组扁平化数组扁平化也叫数组降维、数组扯平。实现数组扯平的方法:Array.prototype.falt()用于将嵌套的数组拉平,变成一维数组。该方法是ES6中的,返回一个新的数组,对原数据没有影响。flat()默认只会扯平一层,若要处理多层的嵌套数组,可以将flat()方法的参数写成一个整数;若无论多少层都要转为一维数组,可以使用Infinity关键字作为参数,若有空位则会跳过。const arr = [1,2,3,[1,2,3,4,5],6,'name',{key:10}]let res原创 2021-09-03 14:44:16 · 945 阅读 · 0 评论 -
函数防抖和节流
防抖函数防抖关注一段时间连续触发,只在最后执行一次,而函数节流侧重于一段时间只执行一次。法师发技能的时候要读条,技能读条没完再按技能就会重新读条触发事件后在N秒内函数只执行一次,若在N秒内又触发了事件,则会重新计算函数执行时间。场景:搜索框搜索输入 只需用户最后一次输入完,再发送请求 手机号、邮箱验证输入检测 onchange oninput事件 窗口大小Resize。只需窗口调整完成后,计算窗口大小,防止重复渲染。//立即执行版本function debounce(fun,d原创 2021-08-27 22:30:46 · 76 阅读 · 0 评论 -
EJS入门了解
EJS入门了解ejs是一个模板语言,通过数据和模板,可以生成HTML标记文本。相当于一个JavaScript库,可同时运行在客户端和服务器端,客户端直接引入文件,服务器端使用npm包安装即可。特点:快速编译和渲染模板标签简单自定义标记分隔符支持文本包含、支持浏览器端和服务器端模板静态缓存支持express视图系统函数render(str,datd,[option]):直接渲染字符串并生成HTMLstr:需要解析的字符串模板data:数据option:配置选项com原创 2021-07-08 16:10:51 · 808 阅读 · 0 评论 -
常用正则校验
日常正则校验校验URLexport function validURL(url) { const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(原创 2021-07-08 16:08:26 · 194 阅读 · 0 评论 -
DOM事件流、事件冒泡、事件委托
DOM事件流、事件委托事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,而事件流描述的是从页面中接收事件的顺序。DOM事件级别事件流(冒泡、捕获、DOM事件流)事件对象事件委托可以想象在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上所有的圆。放到实际页面中就是,你点击一个按钮,事实上你还同时点击了按钮所有的父元素。DOM事件级别DOM级别可分为:DOM0级、DOM1级、DOM2级、DOM3级DOM事件处理为:DOM0级处理、原创 2021-06-22 15:38:43 · 287 阅读 · 0 评论 -
this的五种绑定方式
this的五种绑定方式this的五种绑定规则共有五种默认绑定(严格/非严格模式)隐式绑定显式绑定new绑定箭头函数绑定默认绑定(严格/非严格模式)独立函数调用,可以把默认绑定看作是无法应用其他规则的默认规则,this指向全局对象严格模式下,不能将全局对象用于默认绑定,this会绑定到undefined。只有函数运行在非严格模式下,默认绑定才能绑定到全局对象,在严格模式下调用函数则不影响默认绑定function(){ //运行在严格模式下,this会绑定到unde原创 2021-06-18 15:37:35 · 874 阅读 · 0 评论 -
JS的宏任务和微任务
JS的宏任务和微任务JS宿主环境有事件循环,异步任务会被加入到任务队列。任务队列分为两种,宏任务和微任务。宏任务队列会有很多个,微任务队列只有一个。每次事件循环,先执行微任务队列,执行完后,会选择一个宏任务队列的一个任务执行,然后再次执行微任务队列,完成后再挑一个宏任务队列一个任务执行。总之,就是 微任务栈—>宏任务栈[0]—>微任务栈—>宏任务栈[0]…结果就是 微任务会先于宏任务执行微任务栈process.nextTickpromiseObj原创 2021-06-18 14:57:08 · 275 阅读 · 0 评论 -
深入理解JS的原型、原型链、继承
构造函数、原型、实例三者的关系构造函数创建对象的一种常用方式,其他创建对象的方式还包括工厂模式、原型模式、对象字面量等。每一个构造函数都有一个prototype属性,打印出来之后发现这个属性其实是一个指针,指向一个对象,该对象拥有一个constructor属性(__proto__属性是浏览器引入的一个非官方属性,方便开发者调试使用的)原型构造函数的prototype属性所指向的对象成为原型原型这个对象中,有一个constructor属性,又指回其构造函数本身construct..原创 2021-02-01 10:27:38 · 238 阅读 · 0 评论 -
JS 性能优化之重绘和重排
在理解重绘和重排之前,我们先回忆一下浏览器的渲染页面的过程浏览器渲染页面的过程浏览器请求、加载、渲染一个页面的过程主要是:DNS 查询(DNS的目的:客户端传入网站域名,到DNS列表中找相对应的IP返回到客户端,客户端根据IP找到对应的服务器,就可以向服务器发送请求)TCP 连接HTTP 请求即响应服务器响应客户端渲染这里主要讨论客户端渲染,即浏览器对于页面的渲染,主要有以...原创 2019-08-31 14:57:05 · 1180 阅读 · 0 评论