考核总结.

事件循环

    单线程的js在处理异步事件时进行的一种循环过程。 

    在 JS中任务分为同步与异步任务，其中异步任务又分为两种：宏任务和 微任务。宏任务和微任务的执行顺序：总方针是先同步再异步，异步中先微任务，在宏任务。一次事件循环只执行一个宏任务，所以先清理完微任务，在清理一个宏任务结束后，开启下一次事件循环，即检查有无新增微任务，直到所有的异步任务执行完

await

    await用于等待一个异步操作的完成，并获取其最终结果。在使用"await"时，函数会被暂停，直到异步操作完成才会继续执行

伪类、伪元素

伪类：

    为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的

    状态伪类:基于元素当前状态进行选择的,元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

常见的状态伪类

 :link 应用于未被访问过的链接；    :hover 应用于鼠标悬停到的元素；:active 应用于被激活的元素；:visited 应用于被访问过的链接，与:link互斥。:focus 应用于拥有键盘输入焦点的元素。

    结构性伪类 :css3新增选择器,利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁

 :first-child 选择某个元素的第一个子元素；  :last-child 选择某个元素的最后一个子元素；:nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型；

 伪元素：

  创建一些不在文档树中的元素，并为其添加样式

选择器             例子                      例子描述
::after           p::after          在每个 <p> 元素之后插入内容。
::before          p::before          在每个 <p> 元素之前插入内容。
::first-letter    p::first-letter    选择每个 <p> 元素的首字母。
::first-line      p::first-line      选择每个 <p> 元素的首行。
::selection       p::selection         选择用户选择的元素部分。

选择器权重

选择器        	                 权重	           权重的等级
！important	                    无穷大	               0
style 属性	                    1,0,0,0                1
id 选择器	                    0,1,0,0	               2
类、伪类、结构伪类、属性选择器	0,0,1,0	               3
标签、伪元素选择器	            0,0,0,1                4
通配符选择器	                    0,0,0,0	               5
继承的样式	                    没有权重	               6

 for in与for of 区别

1. for...in :用于遍历对象的可枚举属性(包括原型链上的属性)。
                 适合遍历对象的属性。
                 返回的是属性名(字符串)。
2. for...of:用于遍历可迭代对象(如数组、字符串、Map、Set).
               适合遍历数组元素或其他可迭代对象的值。
               返回的是值，而不是索引或属性名。

防抖、节流

1.防抖： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

 

 function debounce(fn, wait){let timer = null;return function(...args){	let context = this,// 如果此时存在定时器的话，则取消之前的定时器重新记时	if (timer) {	clearTimeout(timer);	timer = null;	}	// 设置定时器，使事件间隔指定事件后执行	timer = setTimeout(() =>{	fn.apply(context,args);	}, wait);	};	
}

2.节流 ：节流就是指连续触发事件但是在 n 秒中只执行一次函数

 

function throttle(fn, delay) {let lastcalltime = 0; // 使用更具描述性的变量名	return function(...args){    //使用剩余参数语法	const context = this;   // 显式捕获this上下文	const now = Date.now();  //使用更具描述性的变量名	// 如果两次调用之间的时间间隔大于或等于指定的延迟	if (now - lastcallTime >= delay) {	// 更新最后调用时间	lastCallTime = now;	// 调用原始函数，并传入正确的上下文和参数	return fn.apply(context, args);	//如果不满足条件，则不执行任何操作(即“节流”)	};	
}