js总结篇

宏观任务和微观任务

答：**宏任务和微任务都是异步任务在同步任务队列之后
而宏任务一般是:包括整体代码script, setTimeout, setInterval、 setlmmediate（node 独有）。
微任务:原生Promise(有些实现的promise将then方法放到了宏任务中)、

什么是闭包

一个函数可以使用另一个函数里面的变量

实现数组反转

1.reveres
2.定义一个变量等于array，让后循环给定义的变量赋值(用unshift)
3.用扩展运算符 [...arr].map(a.pop,arr)
4.定义数组 while(arr.length){arr1.push(arr.pop())}

数组去重

使用es6里的 Set
var arr=[1,2,4,5,7,4,1,4,2,21,4]
var set=[...new Set(arr)]//转换数组
var set=Array.from(set)//非数组转换数组
console.log(set)

字符串反转

1.str.split('').reveres().join('')

什么是冒泡/捕获

冒泡：子节点触发时间是父节点跟着触发，直到DOM根节点
捕获：触发一个节点事件从DOM根节点开始直到它本身

阻止冒泡和捕获事件

阻止冒泡：stopPropagation
阻止默认行为：preventDefault

字符串方法

str.indexOf(str1)// 获取某个字符在当前字符串中第一次出现处的索引 未找到返回-1
str.lastIndexOf(str1) // 获取某个字符串在当前字符串中最后一次出现处的索引 没找到返回-1
str.replace(searchStr,replaceValue) // 替换
str.split (分割符)// 拆分字符串(得到的是一个数组)
str.substr(index,length)//通过和长度截取字符串
str.substring (index,index)// 通过2个下标截取字符串
str.toLowerCase ()// 转小写
str.toUpperCase ()// 转大写 
str.includes(str) //检查是否包含指定字符串  返回true false
str.repeat(num)//复制字符串指定次数
console.log(str.replaceAll('a','A'));//替换字符串
str.search("Runoob"); //返回下标
var n=str.slice(1,5); //返回截取的部分
startsWith()    //查看字符串是否以指定的子字符串开头。
trim()  //去除字符串两边的空白。
​

数组方法

concat()	连接两个或更多的数组，并返回结果。
includes()	判断一个数组是否包含一个指定的值。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()  反转数组
shift() 	删除第一元素 并返回删除的元素 ，原数组会改变
slice(1,2)	数组截取 参数1 开始位置 参数2结束位置 但不包含结束下标元素
sort	排序
//插入元素 参数1 插入位置 参数2 删除个数 参数3，4,5,6，.... 插入的元素
splice(2,2,"Lemon","putao",'菠萝'); 
unshift("Lemon","Pineapple"); 向开头添加元素

every()	  检测数值元素的每个元素是否都符合条件。只要有一个不符合就返回false 返回true/false
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
from()	通过给定的对象中创建一个数组。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
reduce()	将数组元素计算为一个值（从左到右）。

数学方法

abs(x)	返回 x 的绝对值。
ceil(x)	对数进行上舍入。
floor(x)	对 x 进行下舍入。
max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	四舍五入。

正则表达式

\ 反斜杠 代表转义
__________________________________________
修饰词：
g -- 全局匹配
i -- 忽略大小写
m -- 多行匹配
____________________________________________________________
元字符：
[]  -- 匹配括号中的任意字符
. -- 匹配除换行符外的任意字符
\w 数字字母下划线 \W 非数字字母下划线
\d 0-9  \D 非数字
\s 空白字符 \S 非空白字符
\b 单词边界 \B 非单词边界
\n 换行符 \t 制表符 \r 回车符
[\u4e00-\u9fa5] 汉字范围
_____________________________________________________________________________________
量词：
+ -- 前面的字符至少出现一次
* -- 前面的字符出现0次或多次
? -- 前面的字符出现0次或1次
{n} -- 前面的字符出现n次
{n,m} -- 前面的字符出现n到m次
{n,} -- 前面的字符出现n次或多次
^ 开始 $结束
(?=n) 后边紧跟着的字符
(?!n) 后边紧跟着的字符不是n
——————————————————————————————
正则方法：
 var res = reg.exec(str) //返回查找字符的下标
 var res = reg.test(str) //返回true或false
————————————————————————————————
字符串可以使用正则的方法
var res = str.replace(reg, '*')
var res = str.search(reg) //返回查找字符的下标
var res = str.match(reg) //	找到一个或多个正则表达式的匹配
var res = str1.split(/\s/) //分割字符串 返回数组

————————————————————————————————————————
\1\2 使用
\1必须与小括号配合使用

正则表达式中的小括号"()"。是代表分组的意思。
如果再其后面出现\1则是代表与第一个小括号中要匹配的内容相同。
var str = '高高兴兴'
console.log(/([\u4e00-\u9fa5]{1})\1([\u4e00-\u9fa5]{1})\2/g.test(str))
————————————————————————————————————————————————————————————————————
$1 $2 使用	
 //把 "Doe, John" 转换为 "John Doe" 的形式：
  var str =  "Doe, John";
  str.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");
//说明：$1,$2上就是按顺序对应小括号里面的小正则 捕获到的内容。
————————————————————————————————————————————————————————————————
一个小问题：
var reg = /foo/g
		1.console.log(reg.test("foo")) //true
		2.console.log(reg.test("foo")) //false
		3.console.log(reg.test("foo")) //true
		···
	原因： 正则表达式使用了g全局匹配， 当1执行的时候是从下标0开始 检索对应的字符串foo,检索到返回true,因为foo长度为3所以最后检索位置停留在了下标为3，也叫做lastindex
		  当2执行的时候检索位置 是从上次停留的位置lastindex 也就是3开始所以检索不到返回false，当检索返回false时lastindex的下标会重置为0，从0检索肯定可以找到foo所
		  以第三次执行的时候是true
	解决办法： 1.可以把修饰符 g 去掉
			  2. 可以每次使用不同的正则对象例如
					/foo/g.test("foo") //true
					/foo/g.test("foo") //true

DOM元素选择器

    //通过ID 去找到一个唯一节点
    document.getElementById('box1')
    //通过标签名 找到一组节点
    document.getElementsByTagName('div')
    //通过类名 找到一组节点
    document.getElementsByClassName('box')
    //通过标签的name属性去找到元素集合
    document.getElementsByName()
    //通过css选择器寻找对象 .classname #id div  (ul li) 第一个元素
    document.querySelector("#demo");  
    //返回文档中匹配的CSS选择器的所有元素节点列表
    document.querySelectorAll()

DOM节点的事件

  onclick 单击事件 
  ondblclick 双击事件
  onload 页面加载事件 或者 图片加载事件
  onchange 值改变事件
  onsubmit 表单提交事件
  onmouseup 鼠标弹起 (event 鼠标相关的属性)
  onmousedown 鼠标按下
  onkeydown  键盘按下 （event 键盘相关的属性）
  onkeyup	键盘谈起
  onfocus   获取焦点
  onblur    失去焦点
  oncopy    复制事件
  onpaste   粘贴事件
  onscroll  滚动事件
  onselect  选中事件
  onmouseenter	当鼠标指针移动到元素上时触发。	2
  onmouseleave	当鼠标指针移出元素时触发
  onmousemove	鼠标被移动。
  onmouseover	鼠标移到某元素之上。	2
  onmouseout	鼠标从某元素移开。
  onkeypress	某个键盘按键被按下并松开。
  onresize	窗口或框架被重新调整大小。