JS中常用的工具汇总及简单介绍3

一、BOM对象工具

1、提示框工具

1. window.alert( ) ：弹出警告框
2. window.confirm( ) ：带取消的提示工具
3. window.prompt( )：带输入的工具

2、用于滚动到指定页面元素的方法

• window.scrollTo( )

3、处理URI编码

1. decodeURI( )：把URI编码的字符串转换成Unicode编码的字符串
2. encodeURI( )：把Unicode编码的字符串转换成URI编码

4、刷新地址栏/页面刷新

• location.reload( )

5、history—页面前进/后退

1. history.back( )：页面回退
2. history.forward( )：页面前进
3. history.go( 1 )：即可前进也可后退

6、页面打开关闭工具

1. open( )：打开一个新的页面
2. close( )：关闭当前页面选项卡

7、存储工具：localStorage系列

1. localStorage.setItem( 存储数据的名称 , 具体的数据 )：存储数据，不会删除
2. localStorage.setItem( 存储数据的名称 , 具体的数据 )：修改、新增数据，即：再次重新赋值
3. localStorage.getItem( 存储数据的名称 )：查询数据
4. localStorage.key( 下标数值 )：查询数据，几乎不用
5. localStorage.removeItem( 要删除的数据名称 )：删除数据
6. localStorage.clear(无参)：清空数据

8、存储工具—sessionStorage系列

1. sessionStorage.setItem( 存储数据的名称 , 具体的数据 )：存储数据，关闭页面即删除
2. sessionStorage.setItem( 存储数据的名称 , 具体的数据 ) ：修改、新增数据，即：再次赋值
3. sessionStorage.getItem( 存储数据的名称 )：查询数据
4. sessionStorage.key( 下标数值 )：查询数据 几乎不用
5. sessionStorage.removeItem( 要删除的数据名称 )：删除数据
6. sessionStorage.clear(无参)：清空数据

二、JSON类型工具

1. JSON.parse( json格式的字符串 )：把JSON字符串转换成对象/数组
2. JSON.stringify( 对象/数组名 )：把js的对象/数组转换成JSON字符串

三、DOM对象工具

1、DOM对象中的选择器

1. document.getElementById( "id名" )：根据标签id值查找标签的dom对象
2. document.getElementsByTagName( "标签名" )：根据标签名查找标签的dom对象
3. document.getElementsByClassName( "类名" )：根据类名查找标签的dom对象
4. querySelector("css选择符+名称")：根据选择符，选出对应结构的dom对象(只获取1个)
5. querySelectorAll("css选择符+名称")：根据选择符，选出对应结构的dom对象(获取所有)

2、类名操作工具

1. dom.classList.add( "需要增加类名" )：增加类名
2. dom.classList.remove( "需要删除的类名" )：删除类名

3、自定义属性工具

1. dom.setAttribute( "属性名" , "属性值")：增加/修改自定义属性名
2. dom.getAttribute("属性名")：查找属性名获取对应的值
3. dom.removeAttribute("属性名")：删除对应的所有属性名

4、 获取元素在浏览器中的css样式

• getComputedStyle(dom对象)

5、节点操作

1. dom.createElement("标签名")：创建节点
2. dom.appendChild( 插入的dom对象，插入到最后面 )：插入节点
3. dom.insertBefore( 插入的dom对象 , 插入到谁前面 )：插入节点
4. dom.replaceChild( 插入的dom对象 , 替换哪个dom对象 )：·替换节点
5. dom.remove(无参)：删除节点
6. dom.cloneNode( 无参/布尔值 )：克隆节点
7. dom.removeEventListener( 事件类型 , 事件处理函数 )：删除-DOM2事件
8. stopPropagation( )：阻止事件冒泡 (工具在事件对象中)
9. void(0)：表示什么也不做
10. preventDefault( )：在事件中阻止默认行为 (工具在事件对象中)

四、ES5工具

1、改变this指向

1. 函数.call( this新指向，[对应函数调用时的实参1，[对应函数调用时的实参2]] )
2. 函数.apply( this新指向，[对应的实参1，对应的实参2] => 这里是数组)
3. 函数.bind( this的新指向，[ 固定的参数1 ，[固定的参数2 ..]])

五、ES6工具

1、合并内容

1. Object.assign( obj1 , obj2 ..)：把obj2及以后的所有对象内容都合并到obj1上

2、set结构

注意：这里提到的变量名是 => 放了set结构的变量!

1. 变量名.add()：向set结构中插入数据
2. 变量名.has()：判定当前的set结构中，是否存在某条数据
3. 变量名.delete()：删除set中的某条数据

3、map结构

注意：这里提到的变量名是 => 放了map结构的变量!

1. 变量名.set("key名",value值)：向map结构中存入数据
2. 变量名.get(key名)：取出map结构中的数据
3. 变量名.has("key名")：判定map结构中是否存在某条数据
4. 变量名.delete("key名")：删除map结构中的数据
5. 变量名.clear()：清除map结构中的全部数据
6. Array.from(伪数组[工具[参数])：把伪数组转换成真数组

六、正则表达式工具

1. 字符串.match(正则表达式)：根据规则获取符合规则的字符，把字符放到数组中
2. 正则表达式.test( 验证的字符串 )：验证是否符合规则
3. 正则表达式.exec(验证的字符串)：截取匹配正则的字符串
4. 字符串.replace(正则/字符串(要替换的字符)：把当前字符，替换成另外一个字符
5. 字符串.search(需要查找的字符串/正则表达式)：返回查找到的字符的下标

七、对象详解工具

1. Object.defineProperty( 目标对象 , 修改/新增的属性名 , 属性配置对象{})：属性特征修改
2. obj.hasOwnProperty("属性名")：判断对象中是否存在某条属性
3. Object.create(新对象的原型，定义新对象属性的参数)

八、promise对象工具

1、状态监听工具

1. then(状态变为成功之后执行的函数，状态变为失败之后执行的函数)
2. catch(状态改变为失败之后执行的函数)
3. finally(回调函数 => Promise状态只要概念就触发这个参数函数)

2、高级应用

1. promise.all(数组)：所有传入的promise对象状态全部变为成功后再进行处理
2. promise.race(数组)：哪个promise对象状态转变的快，就使用哪个promise对象