网站有死链怎么处理,阳泉网站建设网站,seo推广绩效考核指标是什么,safari网页视频怎么下载1.字符串
(1) 常用方法 1.charAt(index) 返回指定位置的字符,若没找到#xff0c;则返回空2.charCodeAt(index) 返回指定位置的unicode字符编码,若没找到#xff0c;则返回空 3.String.concat(str1,str2) 连接多个字符串#xff0c;并返回新字符串4.String.fromCharCode(co…1.字符串
(1) 常用方法 1.charAt(index) 返回指定位置的字符,若没找到则返回空2.charCodeAt(index) 返回指定位置的unicode字符编码,若没找到则返回空 3.String.concat(str1,str2) 连接多个字符串并返回新字符串4.String.fromCharCode(code1) 根据unicode编码返回字符串5.indexOf(str) 返回str第一次出现的位置若没找到则返回-16.lastIndexOf(str) 返回str最后一次出现的位置若没找到则返回-17.match(regexp) 返回匹配的字符串若没找到则返回null8.search(regexp) 基于正则表达式返回字符串返回匹配的第一个字符串的·位置10.slice(start,end) 截取字符串返回新字符串,不含end11.split(str,limit) 按照str分割字符串返回新数组,limit为切割的最大数量12.substr(start,length) 截取字符串返回新字符串13.substring(start,end) 截取字符串返回新字符串(这个函数与slice基本相同但这个函数支持start end相当于支持逆向截取)14.toLowerCase() 返回小写字符串15.toUpperCase() 返回大写字符串16.trim() 去除字符串两端的空格17.trimLeft() 去除字符串左边的空格18.trimRight() 去除字符串右边的空格19.codePointAt(index) 返回指定位置的unicode编码20.fromCodePoint(code) 根据unicode编码返回字符串21.replace(str,str2){1.基础用法本函数基本用法是传入两个参数匹配字符串中第一个参数将其替换为第二个参数返回一个新字符串不会改变原字符串2.初级用法:第一个参数可以传入正则表达式同时第二个参数中可以写入部分特殊的符号用于匹配特殊的部分基本如下$ - 该符号报能获取到第一个参数匹配到的字符串var sStr讨论⼀下正则表达式中的replace的⽤法;sStr.replace(/正则表达式/,《$》);// 得到讨论⼀下《正则表达式》中的replace的⽤法$ - 获取到匹配项左侧的剩余子串 var sStr讨论⼀下正则表达式中的replace的⽤法;sStr.replace(/正则表达式/,《$》);// 得到讨论⼀下《讨论⼀下》中的replace的⽤法$ - 获取到匹配项右侧的剩余子串var sStr讨论⼀下正则表达式中的replace的⽤法;sStr.replace(/正则表达式/,《$》);// 得到讨论⼀下《中的replace的⽤法》中的replace的⽤法$n - n为数字获取到第n个匹配项的字符串var sStr讨论⼀下正则表达式中的replace的⽤法;sStr.replace(/正则表达式/g,《$1》);// 得到讨论⼀下《正则表达式》中的replace的⽤法3.高级用法 本函数第二个参数中可以传入一个回调函数字符串中匹配了多少次函数就会执行多少次函数参数第一参数匹配的字符串第二参数匹配的字符串的索引第三参数原字符串这里需要注意在匹配函数中使用正则表达式并使用分组匹配这里从第一个参数开始就会将匹配到的每一组都作为参数直到匹配项传完之后紧接着就会传入上面提到的第二第三22.repeat(num) 返回字符串重复num次后的新字符串2.事件流
在dom事件模型中一个事件发生后会在子元素与父元素之间传播这个传播的过程就是事件流。 一般分为三个阶段
事件捕获事件从最外层的父元素开始一直传播到目标元素事件目标事件到达目标元素事件冒泡事件从目标元素开始一直传播到最外层的父元素
两种事件
1.事件捕获
触发元素的事件时该事件从该元素的祖先元素传递下去。 (不太具体的节点应该更早接收到事件⽽最具体的节点最后收到事件)
2.事件冒泡
到达此元素之后⼜会向其祖先元素传播上去 DOM标准规定事件流包括3个阶段事件捕获、处于⽬标阶段和事件冒泡。
事件委托
事件委托就是利⽤事件冒泡只指定⼀个事件处理程序就可以管理某⼀类型的所有事 件
事件模型
1.原始事件模型 var btn document.getElementById(.btn);btn.onclick fun;//移除方式btn.onclick null;事件处理直接绑定在元素上只支持事件冒泡不支持事件捕获 同一类型的事件只能绑定一次。
2.标准事件模型 addEventListener(eventType, handler, useCapture)// 移除方式removeEventListener(eventType, handler, useCapture)eventType指定事件类型(不要加on)handler是事件处理函数useCapture是boolean类型⽤于指定是否在捕获阶段进⾏处理⼀般设置为false与IE浏览器保持⼀致事件捕获从document⼀直向下传播到⽬标元素, 依次检查经过的节点是否绑定了事件监听函数如果有则执⾏。 事件处理到达⽬标元素, 触发⽬标元素的监听函数。 事件冒泡从⽬标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数如果有则执⾏。
支持冒泡的事件
事件可否支持冒泡click可以dbclick可以keydown可以keyup可以mousedown可以mousemove可以mouseout可以mouseover可以mouseup可以scroll可以blur不可以focus不可以resize不可以about不可以mouseenter不可以mouseleave不可以load不可以unloadbukeyi
阻止冒泡
阻⽌冒泡⾏为⾮ IE 浏览器 stopPropagation()IE 浏览器 window. event. cancelBubble true。
阻⽌默认⾏为⾮ IE 浏览器 preventDefault()IE 浏览器 window. event. returnValue false。
3.事件代理及委托
把⼀个元素响应事件click、keydown…的函数委托到另⼀个元素在冒泡阶段完成 相对于直接给⽬标注册事件有以下优点
节省内存减少dom操作不需要给⼦节点注销事件动态绑定事件
事件委托会把⼀个或者⼀组元素的事件委托到它的⽗层或者更外层元素上真正绑定事件的是外层元素⽽不是⽬标元素。 适合事件委托的事件有clickmousedownmouseupkeydownkeyupkeypress
4.HTMLCollection、NodeList
1.NodeList NodeList对象是⼀个类数组对象表示⽂档中⼀组有序的节点⽤于获取⼀组动态变化的节点。
NodeList可以是动态的也可以是静态的具体取决于获取它的方法。例如Node.childNodes返回的是一个动态的NodeList而document.querySelectorAll返回的是一个静态的NodeList。动态的NodeList如Node.childNodes会随着DOM结构的变化而自动更新。如果你在页面上添加或删除了节点那么NodeList的长度和内容也会相应地更新。相反静态的NodeList如通过document.querySelectorAll获取的不会因为DOM的变化而自动更新即使页面上的元素数量发生了变化NodeList的长度和内容也不会改变23。
2.HTMLCollection HTMLCollection对象是⼀个类数组对象表示⽂档中⼀组有序的元素⽤于获取⼀组静态的元素 HTMLCollection通常是通过getElementsByTagName等方法获取的它是一个动态集合live collection。这意味着如果页面的DOM结构发生改变例如添加或删除元素HTMLCollection会自动更新以反映这些变化。例如如果你使用getElementsByTagName获取了一组
元素然后在页面上动态地添加或删除了元素那么HTMLCollection的长度和内容也会相应地更新。
5.Element、Node
1.Element
Element对象是Document对象的⼀个节点表示的是整个文档树中的⼀个节点。 Element对象是document对象中所有节点的父节点它有如下属性
tagName元素标签名如div、span等attributes元素属性集合如class、id等children元素子节点集合如div中的span等outerHTML元素标签及其子节点如htmldiv classboxspan123/span/divinnerHTML元素标签中的子节点如htmlspan123/span
2.Node
Node对象是DOM树中的节点表示的是整个文档树中的⼀个节点。 Node对象是Element对象的父节点它有如下属性
parentNode节点的父节点childNodes节点的子节点集合nextSibling节点的下一个兄弟节点previousSibling节点的上一个兄弟节点nodeName节点的名称如div、span等nodeValue节点的值如文本内容
Node是基类Element、Text都继承于它
6.事件监听
1.onclick类型
onclick类型的事件会绑定到指定的dom元素上当用户点击该元素时就会触发事件处理函数由于这个方式出现的比较早所以基本上所有浏览器都兼容。
2.addEventListener类型
这种方式用于向文档添加事件句柄(简单来说这个方法就是将需要执行的事件监听函数添加到当前元素的事件监听集合中以处理指定类型的事件。)这里需要注意的是这个方法可以为一个元素多次添加事件监听这些事件监听函数都会触发并且所填加的事件处理函数触发先后顺序并不是代码书写顺序 const div document.querySelector(div);function fn() { console.log(1);}div.addEventListener(click,fn,true) // 1div.addEventListener(click,fn,true) // 2div.addEventListener(click,() {console.log(13);}) // 3div.addEventListener(click,() {console.log(14);}) // 4如上面代码所示div元素添加了4个click事件监听正常情况下这4个监听函数都会触发。但由于第一和第二个事件监听都用的是fn函数同时两个事件监听类型是否冒泡等三个参数均为相同这就会导致这两个事件监听只会有一个生效。注意这里的三个参数相同一定指简单类型和引用类型参数两者都是相同的如上面代码中的第三第四个监听事件虽然代码写法完全一致但由于是在参数位置直接传入现定义的函数故两者第二个参数是不同的因此3,4均会执行。针对以上代码的执行顺序可以总结为
先执行第三个参数为true的事件监听若有多个按代码书写顺序执行在按代码书写顺序执行第二个参数为false的事件监听
3.两者的区别
兼容性 onclick兼容所有浏览器 添加事件监听兼容IE9及以上浏览器重复性 onclick只能执行一个事件监听如果多次添加只有最后一次生效。addEventListener可以添加多个事件监听并且不会覆盖(相对来说具体情况看上述代码解析)书写方式 onclick可以作为一个dom属性添加到Html元素上因此可以直接在html中书写也可以在js中书写。但addEventListener必须写在js中且只能写在js中,这个方法主要是为dom元素的事件监听集合中添加监听事件他被挂载在dom的原型上因此可以直接使用。触发顺序 onclick事件监听函数触发顺序是按照代码书写顺序执行addEventListener事件监听函数触发顺序是根据添加的先后顺序执行。这里的添加顺序的规则主要是先会将所有capture为true的事件添加到一个执行队列然后才会从头开始再将剩余的事件添加到队列当触发事件时会依次从队列中取出事件来执行移除方式 onclick一般会将值社外置位null来移除监听事件。addEventLister必须通过removeEventListener来移除监听事件且第二个参数和第三个参数要与添加时一致。
7.页面生命周期
1.页面生命周期
HTML页面生命周期包含四个主要事件 DOMContentLoaded事件HTML文档dom树的解析已经完毕并构建了Dom树但外部CSS图片文件可能还没有完全加载完成。 此时当浏览器遇到script标签时就会停止html解析转而开始下载解析js。因为脚本可能想要修改DOM对其执⾏write操作所以DOMContentLoaded必须等待脚本执⾏结束这就是js阻塞渲染的原因。 为script标签添加以下两个属性就可以放止渲染阻塞 async: 添加这个属性浏览器就会新开一个线程去开始下载脚本文件并在脚本下载完成之后立即执行。 defer: 添加这个属性浏览器就会新开一个线程去开始下载脚本文件但这个属性会使得浏览器在下载完脚本文件之后会等到html解析完成后再执行。 外部样式表不会影响DOM因为DOMContenLoaded不会等待他们。 但是如果在样式后⾯有⼀个脚本那么该脚本必须等待样式表加载完成原因是脚本可能想要获取元素的坐标或其他与样式相关的属性。 load事件页面所有资源加载完毕包括图片、CSS文件等。 当整个⻚⾯包括样式、图⽚和其他资源被加载完成时会触发 window 对象上的 load 事件。可以通过 onload属性获取此事件。 beforeunload事件页面即将被卸载。 如果访问者触发了离开⻚⾯的导航navigation或试图关闭窗⼝beforeunload 处理程序将要求进⾏更多确。 认。 如果我们要取消事件浏览器会询问⽤户是否确定。 unload事件页面已经卸载。
8.异步
1.同步和异步
同步 浏览器在执行js代码的时候会按顺序执行再继续执行后续的js代码。即同一时间只执行一段代码前一个任务必须执行完毕才能执行后一个任务。异步当程序执⾏到异步的代码时会将该异步的代码作为任务放进任务队列⽽不是推⼊主线程的调⽤栈。等主线程执⾏完之后再去任务队列⾥执⾏对应的任务。优点是不会阻塞后续代码的运⾏。
常见场景
定时任务网络请求事件监听
解决方案
回到函数-回调函数就是将异步代码封装成函数在需要的时候调用这样就可以保证异步代码在同步代码执行之后执行。这个最大的缺点就是当需要执行很多的异步代码时会造成代码的嵌套层数很深代码可读性极差俗称回调地狱
Promise
promise时在ES6中引入的一种专门用异步处理的解决方案,他本身是一个对象类型通过new操作符就可以创建一个promise对象这个对象中包含三种状态pending(进行中)、fulfilled(已成功)和rejected(已失败)。
当一个异步操作操作执行后就可以通过某种方式来改变promise的状态。
当promise的状态为fulfilled时可以通过then方法来获取promise对象的结果当promise的状态为rejected时可以通过catch方法来获取promise对象的结果。
Promise构造函数接受一个回调函数作为参数回调函数会挂载两个参数这连个参数都是回调函数分别为resolve,reject。调用这个两个函数就会改变promise的状态。
resolve() 会将promise对象的状态从pending变为fulfilledreject()会将promise对象的状态从pending变为rejected。
因此就可以Promise参数回调函数的位置来执行异步操作并且判断异步操作是否成功如果成功就调用resolve()否则调用reject()。
然后Promise就会返回一个promise对象如果构造函数中回调函数中异步逻辑执行了那么这promise的状态就会永久性的敲定然后我们可以在他的then与catch中通过回到函数来监听promise中状态的改变从而执行相关的逻辑操作。then中需要擦混入一个回调回调函数回调函数会被挂载上一个参数res,这个参数就是在前面创建promise中异步代码所执行的结果。catch中也需要擦混入一个回调回到函数会为回调函数挂载一个err参数改参数代表若前面异步代码执行出错后的出错原因。
同时then与catch其实不会同时执行而是会根据promise对象的状态来决定执行哪个回调函数。
promise对象本身还有一个方法不管是异步操作是否成功都会执行即finally方法该方法同样需要传入一个回调函数这个回调函数在promise对象状态改变后都会执行。
需要注意的是以上三个方法都返回一个新的promise对象这个对象的状态会取决于各自的回调函数中的操作。因此这样一来就可以通过链式调用将多个异步操作串起来。
async/await
前面这种promise的方法来处理异步操作确实比单纯的使用回调函数方便很多但由于链式编程的原因我们还是在依赖回调函数来处理通过链式调用还会造成代码可读性降低。因此ES7中引入了async/await来处理异步操作。这其实是promise的封装语法糖首先他的运行必须是在一个函数中然后通过async将该函数标记为异步函数在函数中执行异步操作的代码前面添加await关键字原本需要通过then方法获取一步结果现在就可以直接由原本的异步操作直接返回本质上这里其实是js引擎等待异步代码执行完毕后获取到结果在返回并不是同步执行只不过还将回调函数变为了底层自动处理减少了代码书写量同样如果是catch方法获取数据await也会直接获取到。
Promise类的其他方法
Promise.Reject() 直接拒绝返回一个状态为rejected的promise对象Promise.Resolve() 直接通过返回一个状态为fulfilled的promise对象Promise.all() 接受一个promise对象的数组只有当数组中的所有promise对象的状态都为fulfilled时返回的promise对象的状态才会为fulfilled否则返回的promise对象的状态就会为rejected且返回的promise对象的结果为第一个rejected的promise对象的结果。Promise.race() 接受一个promise对象的数组只要数组中有一个promise对象的状态改变那么返回的promise对象的状态就会改变且返回的promise对象的结果为第一个改变状态的promise对象的结果。
9.生成器Generator与迭代器Iterator
1.迭代器
迭代器又称迭代器对象是ES6中新增的一种数据类型。它为js中各种不同的数据结构(Array、Set、Map)提供统⼀的访问机制。部署了Iterator接⼝就可以完成遍历操作。 因此iterator也是⼀种对象不过相⽐于普通对象来说它有着专为迭代⽽设计的接⼝。 更具体地说迭代器是通过使用 next() 方法实现了迭代器协议的任何一个对象该方法返回具有两个属性的对象
一个是value表示当前迭代器的值一个是done表示当前迭代器的状态这是一个boolean值当为false时表示迭代序列还可以继续迭代当为true是表示迭代已经到了最终值 迭代器对象最主要的方法就是通过next不断重复的调用获取迭代器对象中的下一个值。
2.生成器 生成器又称生成器函数是ES6中新增的一种函数类型。
生成器函数与普通函数不同生成器函数通过function关键字后加一个*号来标识。最初生成器函数不会执行任何逻辑里面的代码也不会执行而是在调用生成器函数后会返回一个特殊的迭代器这个迭代器就被称为生成器。我们接下来调用这个生成器的next() 方法就会消费掉这个生成器然后生成器函数中的逻辑才会执行执行过程中遇到第一个yield语句就会暂停函数代码的执行从而又返回一个生成器以此类推直到整个函数执行完毕。
返回的生成器函数的值就是yield语句后面的值这个关键字和return关键字很像但他不会结束函数运行而是暂停函数运行返回生成器
3.可迭代对象
若一个对象拥有迭代行为则被称为可迭代对象。如js内置的Array、Set、Map等。为了实现迭代这个对象必须部署了Symbol.iterator属性该属性返回一个迭代器。
for … of就是采用对象的Symbol.iterator属性来遍历可迭代对象。
手写for…of function forOf(obj,callback) {let iterator obj[Symbol.iterator]()while(true) {const res iterator.next()if(res.done) break;callback(res.value)}}forOf([1,2,3,4,5],(data) {console.log(data);})对于原本不具有迭代器的对象我们可以通过部署Symbol.iterator属性来使其具有迭代器行为。 const obj {}obj[Symbol.iterator] function* () {yield 1yield 2yield 3}for(let i of obj) {console.log(i);}4.yield与return异同点
相同点 都可以返回值且都会暂停函数执行。 不同点 yield可以返回多次值而return只能返回一次值。 都能返回紧跟在语句后⾯的那个表达式的值 yield相⽐于return来说更像是⼀个断点。遇到yield函数暂停执⾏下⼀次再从该位置继续向后执⾏⽽ return语句不具备位置记忆的功能。 ⼀个函数⾥⾯只能执⾏⼀个return语句但是可以执⾏多次yield表达式。 正常函数只能返回⼀个值因为只能执⾏⼀次returnGenerator 函数可以返回⼀系列的值因为可以有任意多个yield
特别注意箭头函数不可以做生成器函数。
手写模块
手写数组forEach方法 Array.prototype.myForEach function (callback) {// 获取迭代器对象const iterator this[Symbol.iterator]()let index 0while(true) {const res iterator.next()if(res.done) break;callback(res.value,index,this)index}}10.定时器
1.setTimeout;
setTimeout(⭐ 必选参数) 是一个挂载到全局对象上的一个方法他开启一个定时器这里我更加习惯叫他延时器,定时器会在一定时间之后执行同时本身返回一个定时器的ID使用该ID我们可以取消定时器的设置。
参数
functionRef 定时器到需要执行的函数逻辑delay 延时时间单位是毫秒如果不传这个这个 参数默认是0这个值有一个最小值就是4ms,如果小于这个值会被自动设置为4ms,0除外param1, …, paramN 此后的参数都是作为定时器所执行的函数的参数传递
返回
定时器的ID可以用来取消定时器这个ID本质上是一个正整数。
取消
setTimeOut的取消可以调用全局对象上的clearTimeout方法该方法接收一个参数就是定时器的ID。
this指向
由 setTimeout() 执行的代码是从一个独立于调用 setTimeout 的函数的执行环境中调用的。为被调用的函数设置 this 关键字的通常规则适用如果你没有在调用中或用 bind 设置 this它将默认为 window或 global对象。 简单来说就是对于传入的函数this指向全局对象如果需要改变this指向可以对传入的函数使用bind方法。
注意 不能为setTimeout使用call等方法来改变其this,因为setTimeout是挂载在全局对象上的而call等方法会改变this指向,这是不被允许的就算改变了setTimeout的this指向其中调用的函数还是指向全局对象因为两者在调用时不是处于同一执行环境中。
解决方法这里可以使用包装函数来解决this问题也可以使用箭头函数或者bind方法 setTimeout(function() {obj.fn() // 这样fn就指向obj了})setTimeout(obj.fn) // 这样fn中的this指向全局对象
//也可以这样写setTimeout(obj.fn.bind(obj)) // 这样fn中的this指向objsetTimeout(() {obj.fn() // 这样fn中的this指向ob})这里还有一个需要注意的点就是setTimeout执行函数的位置本质上可以传入一个可执行的js字符串代码与eval相似但是现存许多安全问题因此许多文档中不建议使用传递给 setTimeout() 的字符串是在全局上下文中求值的因此当字符串被求值为代码时setTimeout() 被调用的上下文中的局部符号将不可用。
详情可参考MDN官网
MDN-setTimeout
延时比指定值更长的原因
嵌套超时 一旦对 setTimeout 的嵌套调用被安排了 5 次浏览器将强制执行 4 毫秒的最小超时。定时器队列 如果页面或操作系统/浏览器正忙于其他任务超时也可能比预期的晚。需要注意的一个重要情况是在调用 setTimeout() 的线程结束之前函数或代码片段不能被执行。
function foo() {console.log(foo 被调用);
}
setTimeout(foo, 0);
console.log(setTimeout 之后);出现这个结果的原因是尽管 setTimeout 以 0ms 的延迟来调用函数但这个任务已经被放入了队列中并且等待下一次执行并不是立即执行队列中的等待函数被调用之前当前代码必须全部运行完毕因此这里运行结果并非预想的那样。
最大延时时间
浏览器内部以 32 位带符号整数存储延时。这就会导致如果一个延时大于 2147483647 毫秒大约 24.8 天时就会溢出导致定时器将会被立即执行。
兼容市面上所有的浏览器
2.setInterval
setInterval() 方法可按照指定的周期以毫秒计来调用函数或计算表达式。setInterval() 方法会不停地调用函数直到 clearInterval() 被调用或窗口被关闭。
参数
functionRef 定时器到需要执行的函数逻辑delay 延时时间单位是毫秒如果不传这个这个 参数默认是0这个值有一个最小值就是4ms,如果小于这个值会被自动设置为4ms,0除外param1, …, paramN 此后的参数都是作为定时器所执行的函数的参数传递
返回
定时器的ID可以用来取消定时器这个ID本质上是一个非零数值。
取消
setInterval的取消可以调用全局对象上的clearInterval方法该方法接收一个参数就是定时器的ID。
⭐注意 setTimeout与setInterval的定时器共用同一个ID池并且clearInterval与clearTimeout两者在技术实现上时互通的因此两者其实都可以用于取消上述两种定时器的任何一种但官方标准上建议我们匹配使用避免代码杂乱无章。
this指向 y与setTimeout类似
定时器是可以嵌套的这意味着setInterval() 的回调中可以嵌入对 setInterval() 的调用以创建另一个定时器即使第一个定时器还在运行。为了减轻这对性能产生的潜在影响一旦定时器嵌套超过 5 层深度浏览器将自动强制设置定时器的最小时间间隔为 4 毫秒。如果尝试将深层嵌套中调用 setInterval() 的延迟设定为小于 4 毫秒的值其将被固定为 4 毫秒。
当浏览器标签页处于后台或不活跃状态时浏览器可能会延迟执行定时器任务以节省资源。这种情况下定时器的执行时间可能会比预期的长。
