1、BOM常用对象

1.1.historyd对象（保存当前窗口的历史纪录）

前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);
复制代码

1.2.location对象（保存了当前窗口正在打开的URL，由五部分组成）

①协议：https(加密)/http(未加密)/ftp(传输文件)/ws(直播)...前两个都属于叫做请求-响应模型
②主机号|IP地址|域名：域名是需要花钱购买的，主机号|IP地址是免费，127.0.0.1才真的是叫做主机号，只能自己访问自己
③端口号：https默认端口为443，http默认端口为80，只有默认端口可以省略不写
④文件的相对路径|路由
⑤查询字符串|请求消息：前端传输到后端的东西，前端对后端说的话，就是form表单提交带来的东西
复制代码

1.2.1.属性

①获取url5个部分的内容，也可直接输入location对象查看

协议：location.protocal;
域名：location.hostname;
端口：location.port;
路由：location.pathname;
请求消息：location.search;
复制代码

②跳转

location="新url" - 替换当前窗口，可以后退
复制代码

③跳转后，禁止后退

location.replace("新url") - 替换当前窗口，禁止后退
复制代码

④刷新

location.reload();
复制代码

1.3.事件周期（从事件发生，到所有事件处理函数执行完毕的全过程）

①捕获阶段：由外向内，记录要发生的事件有哪些
②目标优先触发：目标元素->当前点击的实际发生事件的元素
③冒泡触发：由内向外，依次执行我们之前记录着的要发生的事件
复制代码

1.4.获取事件对象event

1.4.1.获取鼠标的坐标

获取鼠标相对于屏幕的坐标：e.screenX/Y
获取鼠标相对于窗口/客户端/文档显示区域的坐标：e.clientX/Y
获取鼠标相对于网页的坐标：e.pageX/Y
复制代码

1.4.2.阻止事件冒泡

主流：e.stopPropagation();
老IE：e.cancelBubble=true;
兼容：e.cancelBubble=true;
复制代码

1.4.3.利用冒泡/事件委托(开发中常用)

为什么要利用冒泡，进行事件委托？因为每一次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网站性能就越差，因此我们直接给父元素绑定一个事件，通过target可以直接找到当前元素，提高了网站的性能

主流：e.target;
老IE：e.srcElement;
兼容：e.srcElement
复制代码

1.4.4.阻止浏览器的默认行为

主流：e.preventDefault();
老IE：e.returnValue=false;
兼容：e.returnValue=false
①右键事件 - window.oncontextmenu
②键盘事件：一般来说用于游戏开发较多+都要搭配上键盘的键码
        window.onkeydown - 按住和按下，任何键盘按键都可以触发
        window.onkeypress - 按住和按下，只有字母、数字、回车、空格可以触发，其他按键不行
        window.onkeyup - 松开，任何键盘按键都可以触发
复制代码

1.4.5.获取键盘的键码

e.keyCode; 可以获取到当前按下的键
复制代码

2、this

2.1.this的指向

单个元素绑定事件this->这个元素
多个元素绑定事件this->当前元素
箭头函数中的this->外部对象
函数中的this->当前正在调用函数的这个人
定时器的this->window
复制代码

2.2.强制改变this的指向

2.2.1.call/apply：临时的替换了函数的this

语法：
    函数名.call(借用的对象,实参,...); - 单独传入每个实参
    函数名.apply(借用的对象,arr); - 只能传入一个实参要求是一个数组，apply其实会悄悄的打散数组
强调：call/apply：相当于立刻调用函数，立即执行的
复制代码

2.2.2.bind：永久替换了函数中的this

1、创建了一个和原函数功能完全相同的新函数

2、将新函数的this永久绑定为了指定对象

3、将新函数的部分参数永久固定

语法：var 新函数=函数名.bind(永久对象,永久实参,...); - 不是立刻执行，需要自己调用
强调：bind绑定的新函数没办法被call/apply再次借走
复制代码

2.3.三个固定套路

①Math.max/min.apply(Math,arr) - 也能支持数组参数：	
②Object.prototype.toString.call/apply(x)==="[object Array]";//鄙视题：判断xx是不也是一个数组
③类数组转为普通数组：
    let arr=Array.prototype.slice.call/apply(类数组对象)
    let arr=Array.from(类数组对象)
复制代码

2.4.解构赋值（如果赋值符号，左右两边的结构一样的，就会悄悄的解开/脱掉结构再一一的进行赋值）

①类似数组的解构赋值

let [a,b,c]=[1,2,3];
console.log(a);
console.log(b);
console.log(c);
复制代码

②类似对象的解构赋值

let {a,b=默认值,c}={c:3,a:1,b:2};
console.log(a);
console.log(b);
console.log(c);
复制代码

③调用函数时，传递实参的顺序无所谓了

function zwjs({name,age,hobby="女"}){
    return `我的名字叫${name},今年${age}岁,喜欢${hobby}`;
}
console.log(zwjs({hobby:"学习",age:18,name:"peng"}));
复制代码

④函数的返回的结果，可以有多个

function f1(){
    var a=1;
    var b=2;
    return [a,b];
}
var [a,b]=f1();
console.log(a,b);
复制代码

2.5.Set和Map新的数据类型

①Set：类似于数组的一种数据格式（去重数组，然后再转回数组）

var s=new Set(arr);
...s - 三个点扩展运算符，可以脱掉数组的外套
一句话完成：[...new Set(arr)] - 不用记忆任何API
复制代码

②Map（类似于对象的一种数据格式）

var m=new Map();
添加：m.set("键","值");
获取：m.get("键");
清空：m.clear();
删除：m.delete("键");
复制代码

3、DOM

3.1.查找元素

①var elem=document.querySelector

缺陷：只能找到单个元素，如果匹配到多个，也只能返回第一个，没找到返回null，一次只能操作一个元素
复制代码

②var elems=document.querySelectorAll

优点：找到了是一个集合，没找到是一个空集合
      复杂查找时，非常简单
      返回的是一个静态集合
复制代码

动态集合与静态集合的区别：

①动态集合：每一次DOM发生变化，他都会悄悄的再次查找，让页面和数据保持一致，但是效率也就低下了 - 不支持forEach

②静态集合：每一次DOM发生变化，他不会悄悄的再次查找，让页面和数据没有保持一致，但是效率也就高了 - 支持使用forEach

3.2.操作属性

①获取属性值

核心DOM：elem.getAttribute("属性名");
HTML DOM：elem.属性名;
复制代码

②设置属性值

核心DOM：elem.setAttribute("属性名","属性值");
HTML DOM：elem.属性名="属性值";
复制代码

③删除属性：设置属性值为空字符串，确实某些属性可以算是删除，但是只是删除了属性值，属性名还在，而有的属性哪怕只有一个属性名，也会具有作用

核心DOM：elem.removeAttribute("属性名");
HTML DOM：elem.属性名=""; - 属性节点删不干净
复制代码

3.3.删除元素

elem.remove()
复制代码

4、递归（简单来说就是再函数之中再一次调用了函数自己）

4.1.何时使用

专门用于遍历层级不明确的情况----DOM树和数据（children只能找到儿子层，找不到孙子层）

4.2.使用方法

function 函数名(root){
    /直接做想要做的操作
    /判断有没有下一层，如果有下一层则再次调用此方法，只不过传入的实参是自己的下一层
}
函数名(实际的根)
复制代码

4.3.缺陷

不要过多使用，性能相对较差，同时开启大量的函数调用，浪费内存，我们只在一个情况：层级不明确的时候

5、绑定事件

5.1.在HTML上书写事件属性

<elem on事件名="函数名(实参)"></elem>
    缺点：
    1、不符合内容与样式与行为的分离原则
    2、无法动态绑定，一次只能绑定一个元素
    3、不支持绑定多个函数对象
复制代码

5.2.在js中使用事件处理函数属性

elem.on事件名=function(){操作}
    优点：
    1、符合内容与样式与行为的分离原则
    2、动态绑定，一次能绑定多个元素
    缺点：
    1、不支持绑定多个函数对象
复制代码

5.3.在js中使用事件API（但是有兼容性问题）

主流：elem.addEventListener("事件名",callback);
老IE：elem.attachEvent("on事件名",callback);
兼容：
    if(elem.addEventListener){
    elem.addEventListener("事件名",callback);
    }else{
        elem.attachEvent("on事件名",callback);
    }
优点：
    1、符合内容与样式与行为的分离原则
    2、动态绑定
    3、支持绑定多个函数对象
缺点：有兼容性问题
复制代码

select&option可以简化创建元素和上树

select.add(new Option("innerHTML","value"));
复制代码

6、正则表达式（定义字符串中字符出现规则的表达式）

6.1.何时使用

切割、替换、验证

6.2.如何使用

6.2.1.最简单的正则（关键字原文）

6.2.2.备选字符集

注意：

1.一个中括号，只管一位字符

2.问题：正则表达式默认只要满足就不管后续了，而我们做验证的人，希望的是用户从头到尾按照我们的要求来，希望从头到尾完全匹配：  

  解决：前加^，后加$，两者同时使用，代表要求从头到尾完全匹配/^[备选字符集]$/ - 只要做验证必加！
  
3.特殊：如果备选字符集中的ascii码是连续的，那么可用-省略掉中间部分

  例如：一位数字：[0-9];
        一位字母：[A-Za-z];
        一位数字、字母、下划线：[0-9A-Za-z_]
        一位汉字：[\u4e00-\u9fa5]
        除了数字之外的：[^0-9]
复制代码

6.2.3.预定义字符集（提前预定义好的一些字符集，方便程序员使用）

一位数字：\d ===>[0-9]
一位数字、字母、下划线：\w ===> [0-9A-Za-z_]
一位空白字符：\s
一位除了换行外的任意字符：. 很少使用，范围太广了
复制代码

建议：优先使用预定义字符集，预定义满足不了我们再用备选字符集补充

问题：不管是备选字符集，还是预定义字符集，一个都只管一位

6.2.4.量词（规定一个字符集出现的次数）

1、有明确数量：
    字符集{n,m}：前边相邻的字符集，至少n个，最多m个
    字符集{n,}：前边相邻的字符集，至少n个，多了不限
    字符集{n}：前边相邻的字符集，必须n个
2、无明确数量：
    字符集?：前边相邻的字符集，可有可无，最多1个
    字符集*：前边相邻的字符集，可有可无，多了不限
    字符集+：前边相邻的字符集，至少一个，多了不限
复制代码

6.2.5.选择和分组

选择：在多个规则中选一个
    规则1|规则2
分组：将多个字符集临时组成一组子规则
    (规则1|规则2)
复制代码

6.2.6.指定匹配位置

^：开头
$：结尾
复制代码

特殊：两者同时使用，前加^，后加$，表示从头到尾要求完全匹配，只要做验证就要两者同时使用

6.2.7.密码强度验证

预判公式

    (?![0-9]+$) -> 不能全由数字组成，可能有大写、小写、汉字、日文、特殊符号...
    (?![a-z]+$) -> 不能全由小写组成，可能有数字、大写、汉字、日文、特殊符号...
    (?![0-9a-z]+$) -> 不能全由数字组成、也不能全由小写组成、也不能全由数字和小写的组合组成
    例如：
        /(?![0-9a-z]+$)(?![A-Za-z]+$)[0-9A-Za-z]{2,4};//2-4位，可以输入数字、字母，但是必须出现一位大写和一位数字的组合
        /(?![0-9a-z]+$)(?![A-Za-z]+$)(?![A-Z0-9]+$)[0-9A-Za-z]{2,4}/;//必须三者都有
        /(?![0-9A-Za-z]+$)[0-9A-Za-z_]{2,4}/;//至少要有下划线
复制代码

6.3.支持正则表达式的字符串API

6.3.1.切割

var arr=str.split("固定切割符"/RegExp);
复制代码

6.3.2.替换

基本替换法：

str=str.replace(/正则表达式/后缀,"新内容");
//replace支持支持正则，并且搭配上后缀g就可以找到全部
//缺陷：替换的新内容是一个固定的
复制代码

高级替换法

str=str.replace(/正则表达式/后缀,function(a,b,c){
    console.log(a);//正则匹配到的关键字
    console.log(b);//正则匹配到的关键字的下标
    console.log(c);//原字符串
    return 判断a关键字的长度，而返回不同的星星数量
});
复制代码

格式化（需要搭配上小括号分组，函数中的形参数量不限）

例如：

6.4.正则对象

6.4.1.创建

1、直接量：var reg=/正则表达式/后缀;
2、构造函数：var reg=new RegExp("正则表达式","后缀");
复制代码

6.4.2.API

验证：var bool=reg.test(用户输入的)

作者：nnnnna
链接：juejin.cn/post/721677…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。