js3笔记

20.获取标签方式：
    document.getElementById("box")：通过ID获取标签
    document.getElementsByClassName("box")：通过类名获取元素     复数      IE9及以上
    document.getElementsByTagName("li")：通过标签名获取   复数
    document.getElementsByName("name")：通过Name属性获取   复数              在IE9及IE9以下，是不能通过Name属性获取非表单元素的
    
    w3c发布的获取标签方式：
        document.querySelector("#box")： 选择符合条件的第一个元素节点
        document.querySelectorAll("#box"):返回的是一个集合（nodeList，可以使用数组的方法）
    
    getElementXXX和queryselector的区别：
        getElementXXXX获取的元素是动态的，实时改变
        querySelectorAll  获取的元素是静态的  获取一次以后，长度不再发生变化

21.DOM0和DOM2事件    
    事件流：
           事件流是多个节点对象对同一个事件的响应顺序，事件流分为以下3个
               冒泡型：（IE）
                    事件从最具体的目标（target）向最不特定的目标（document）触发,事件从里到外相应，被称作为冒泡
            捕获型：（网景）
                   事件从最不具体的目标（document）开始触发，向最特定的目标结束，也就是从外向里响应。这样被称作为捕获
            混合型：（W3C事件模型，事件机制，事件流）
                   W3C的事件模型支持冒泡和捕获类型，其中捕获过程先发生，目标阶段在执行，然后，冒泡阶段最后发生
                开发人员可以选择W3C的事件执行时机
            
    DOM0事件：
        DOM0事件绑定的事件流是冒泡~
        两种绑定方法：
             1.静态绑定 把JS的脚本作为属性值，赋值给元素的事件属性
                 <div id="box" οnclick="f()">box  你点我</div>
            2.动态绑定：给元素的DOM对象的事件属性进行赋值
                oCon.onclick = function () { }
        
        表单事件：
            onfocus：获取焦点事件
            onblur：失去焦点事件
            onchange：在输入框失去焦点或用户按下回车时触发(前提是输入框的值要发生改变)
                oninput：实时监测，只要表单的值发生改变就会触发
                form.onsubmit：表单提交时触发(触发form标签onsubmit事件)
        
            鼠标事件：
            onclick：鼠标单击事件
            ondblclick：鼠标双击事件
            oncontextmenu： 鼠标右击事件
            onmousedown:鼠标按下触发
            onmouseup:鼠标抬起触发
            onmousemove:鼠标移动触发（无论是否按下鼠标）,只要移动就会一直触发
            onmouseover：鼠标移入（支持冒泡）
            onmouseout：鼠标移出（支持冒泡）
    
            onmouseenter：鼠标移入（不支持冒泡）
            onmouseleave：鼠标移出（不支持冒泡）
            
            鼠标滚轮事件：
           ie/谷歌：
               onmousewheel（DOM0级既可以绑定）
               ev.wheelDelta:
                       滚轮向下拨：  负
                       滚轮向上拨：  正
        
               火狐：
               DOMMouseScroll（DOM2级事件）:
                   e.detail
                           滚轮向下拨：  正
                           滚轮向上拨：  负
        
            键盘事件：
            onkeydown:键盘按下事件
            onkeyup:键盘抬起事件
            
        window.onload:当所有的节点和资源都加载完毕后才执行
        img.onload:图片加载完毕后才执行
        window.onunload:页面卸载，这个页面被超链接跳转走、历史记录回退前进、关闭窗口的时候触发
        window.beforeunload:和unload类似，不过更加人性化 会弹出弹窗 让用户确定自己的选择，事件函数的返回值就是窗口的提示信息
        window.onscroll：滚动条事件，实时检测触发，间隔事件可以达到很短
        window.onresize：可视窗口改变后被触发
        
        
    DOM2事件：
        DOM2事件可以选择捕获阶段还是冒泡阶段执行事件
        在DOM2事件模型中，调用对象的addEventListener()方法注册事件
            参数
               1.type：注册事件的类型名称，以事件属性不同，不需要书写on，比如点击事件 就书写 click
               2.listener:监听函数，也就是事件处理函数，事件发生的时候，调用这个函数
               3.useCapture：是一个布尔值，如果为true，则事件会在捕获的阶段发生，如果为flase，则事件会在冒泡的阶段发生
                    //第三个参数也可以是一个对象
                    capture：布尔值，和 useCapture 作用一样
                    once：布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听
                    passive：布尔值，表示永远不会调用 preventDefault
        IE的事件模型（IE8以下）
               使用对象的attachEvent方法绑定事件
                    和addEventListener()类似，但是只有两个参数，只能冒泡，不能选择事件流
        
        DOMContentLoaded：当所有的节点都加载完毕以后就执行
        transitionend: 当过渡动画执行完毕后触发  this.addEventListener("transitionend",fn)
        animationend:当关键帧动画结束
        online：联网触发添加到window上
        offline：掉网触发添加到window上
        storage:A 页面绑定storage事件 一旦B页面设置localStorage,A页面就能通过storage事件得到B页面设置的内容（B页面将数据发送给A页面）
        visibilitychange：可以实时的监听当前页面是否可见，添加到document上
                        // document的hidden属性可以判断当前是否可见 true代表看不见  false代表看的见
                        document.addEventListener('visibilitychange',function () {
                            console.log(document.hidden);
                            if (document.hidden) {
                                clearInterval(timer);
                            }else{
                                timer = setInterval(function () {
                                    i ++;
                                    console.log(i)
                                },100)
                            }
                        })
        
    销毁事件：
           DOM:
                  直接给事件赋值null  覆盖原有事件
        
           DOM2：
                  必须保证绑定的函数和移除的函数是同一个函数
                   使用removeEventListener()移除事件,两个参数，事件名，事件函数
            
    事件委托（delegate）：就是我们平时绑定的事件，委托就是把目标节点的事件绑定到祖先元素上
    *   优点1.优化代码性能减少for循环， 2.防止动态的添加删除节点中 注册的事件丢失的现象
    *   原理：冒泡  逐层的冒泡会被祖先元素捕捉到
    
22.BOM
     计时器:
     延迟计时器：window.setTimeout("alert(1)",1000)
     清除计时器：clearTimeout(timer)
     间隙计时器：window.setInterval(function () {},1000)
     清除计时器：clearInterval（timer）
    帧动画:window.requestAnimationFrame():参数是一个回调函数,16.6 毫秒内执行一次回调
    3种弹窗:
        1.alert("有"):确定提示框，由浏览器向用户弹出提示信息，该方法包含一个参数（展示给用户的信息）。
           按钮状态是一  个确定。
        2.confirm("请重新输入"):选择提示框，也是向用户弹出提示信息，包含两个按钮，确定和取消。
                                 如果用户点击确定，则方法返回true，否则返回false
                    confirm()包含一个字符串的参数，如果不写，就没有提示信息，只有按钮
        3.prompt("叫爸爸","爸你大爷"): 可输入提示框  包含两个按钮  确定和取消
                           包含一个输入框，可以供用户输入
                           如果用户点击确定，则返回用户输入的值 否则返回null
                           如果用户不输入，则返回空字符串
                           包含两个参数，一个是给用户的提示信息，一个是输入框的默认值
    
    navigator对象：
        navigator对象储存了与浏览器相关的基本信息，比如，版本、操作系统、名称。
        
    属性：
         userAgent：包含了web浏览器大量的信息
         
    浏览器版本检测：
        var uA = window.navigator.userAgent.toLowerCase();
        var info = {
            ie:/msie/.test(uA) && !/opera/.test(uA),
            op:/opera/.test(uA),
            sa:/version.*safari/.test(uA),
            ch:/chrome/.test(uA),
            ff:/gecko/.test(uA)&&!/webkit/.test(uA)
        }
        info.ie && alert("IE");
        info.op && alert("Opera");
        info.sa && alert("safari");
        info.ch && alert("chrome");
        info.ff && alert("firefox");
        
    获取IE版本号：
        function getIEVer() {
            var uA = navigator.userAgent;
            var b = uA.indexOf("MSIE");
            if (b<0){
                return "不是IE"
            }
            return uA.substring(b+5,uA.indexOf(";",b))
        }
    
        console.log(getIEVer());
    
    
    检测操作系统：
        var uA = navigator.userAgent;
        var isWin = uA.indexOf("Win") != -1;
        var isMac = uA.indexOf("Mac") != -1;
        var isUnix = uA.indexOf("X11") != -1;
        var isLinux = uA.indexOf("Linux") != -1;
        console.log(isWin,isMac,isUnix,isLinux)
    
    
        console.log(navigator.platform);
    
    
    
    location对象：
        储存了与当前文档url相关的一系列信息，简单的说就是当前的网址这个字符串
        
    属性：
        href：声明或者获取当前文档的URL   可以制作重定向(location=url也可以完成重定向)
        
        protocol:协议部分，包含冒号
           host:主机和端口名称 www.baidu.com:8080
        hostname:主机名称 localhost
        port:端口号
        pathname:路径部分
        search:查询部分 包括前导问号
        hash：锚链接部分 包含前导的#
        
    方法：
        location.assign("http://www.baidu.com")：里边传递一个字符串（地址） 然后重定向  和href类似
        location.reload()：重新加载当前网页  刷新
        location.replace("http://www.baidu.com")：替换当前网页的url地址 并且替换了当前网页在历史记录的保存
        
    
    
    history对象：
        储存了当前客户端浏览器的历史纪录
        
    属性：
        history.length：可以得到历史记录的长度
        
    方法：
        history.back()：在历史记录中返回
           history.forward()：在历史记录中前进
        history.go(n)：可以输入数字 代表哪一个历史记录  比如 1 前进1页   -2 后退两页
        
    
    
    window对象打开和关闭窗口：
        *   - window.open():可以打开一个新的窗口
        *   - 三个参数：
        *       url：新的页面地址，如果省略则是空白页面
        *       name:新窗口的名称，存在则跳到已经存在的窗口
        *       features：新窗口的特征
        * `         width、height、top、left
                window.open()的返回值 可以调用close()，让新窗口关闭
        *
        *   - window.close():可以关闭窗口
        *   - window.closed:  可以检测窗口是否关闭  如果关闭则返回true
    H5存储技术： 
     localStorage:用在持久化的储存本地数据，除非主动删除，跨页面的同域名同浏览器下都可以访问,大小5M(存储在浏览器的本地的文件中(硬盘),相比sessionStorage比较慢)
     sessionStorage:储存临时数据，网页关闭数据会立马自动删除，只有当前页面可以访问,大小5M(存储在浏览器运行的内存中,速度比较快)
     cookie:用于浏览器和服务器端进行通信的，解决http协议无状态(多个用户给服务器发送请求，服务器无法识别具体用户，会将对个用户的请求返回给多个用户)
             临时cookie(浏览器自带功能):浏览器内存中存储,浏览器关闭了就销毁了（不加maxAge属性）
             持久化cookie:服务器可以通过maxAge属性设置时间
     session:会话储存
                     
                 
    方法：
        localStorage.setItem("name","lily")：设置localStorage
        // 等价于localStorage.name
        localStorage.getItem("name")：获取localStorage,如果localStorage没有"name"属性，获取的是字符串null
        localStorage.removeItem("name")：删除localStorage
        localStorage.clear()：清空localStorage
        localStorage.key(i)：获取localStorage键名
            length属性：长度
    sessionStorage同localStorage 
    注意： sessionStorage和localStorage必须储存的是文本(字符串或者JSON数据) 
    
23.Web workers
    能够创建一个并行处理的后台线程，并且在这个后台线程中可以基础创建多个子线程
    new Worker("worker1.js"):创建线程
    worker.postMessage("hello world")：向子线程传递数据/向主线程传递数据
    worker.onmessage = function (d) {}：接受子线程返回的数据d/接受主线程返回的数据d
    worker.terminate()：关闭线程
    
24.读取文件/读取图片
    读取文件：
        //文件上传后 会触发file的change事件
            oFile.onchange = function () {
                console.log(file);//在file被改变时  file代表当前的节点
                console.log(this.files);//file中的 files代表刚刚上传的内容
                // 在this.files中是一个对象，里边包含上传的文件列表
                // 在文件列表中 包含 文档的名称类型等
    
                // 但是不能直接读取文件中的内容
                // 想要读取文件中的文本内容 需要使用FileReader对象，所以首先实例化一个FileReader对象
                let reader = new FileReader();
    
                // reader就可以读取文件中的文本内容，需要使用readAsTest方法来读取
                reader.readAsText(this.files[0]);
    
                //reader去读取文本的时候需要一定的时间，所以大概读取完成后会通知我们，则需要一个监听事件，
                //当reader读取完毕，则取执行相关代码，  直接使用load事件即可
                reader.onload = function () {
                    //当reader读取完文本的内容，则会进入事件
                    // 当reader读取完成以后，会把读取的内容存放在reader对象的 result属性 中
                    oCon.innerHTML = reader.result;
                }
            }
       读取一张图片：    
        oFile.onchange = function () {
            console.log(this.files);

            // 读取图片依然使用 FileReader对象
            let reader = new FileReader();
            console.log(reader);

            //reader中的readAsDataURL来读取图片的数据
            reader.readAsDataURL(this.files[0]);

            // 当读取完毕以后，可以出发load事件
            reader.onload = function () {
                let newImg = new Image();
                newImg.src = this.result;
                oCon.appendChild(newImg);
            }
        }
       读取多张图片：    
        oFile.onchange = function () {
            console.log(this.files);

            // 读取图片依然使用 FileReader对象

            for(let i in this.files){
                let reader = new FileReader();
                reader.readAsDataURL(this.files[i]);
                // 当读取完毕以后，可以出发load事件
                reader.onload = function () {
                    let newImg = new Image();
                    newImg.src = this.result;
                    oCon.appendChild(newImg);
                }
            }
        }
            
25.canvas画布：
    canvas:在HTML5中 提供了canvasAPI 允许JS在canvas画布上绘制图形,默认的canvas大小是  300*150  默认颜色是透明的
            canvas的宽高 必须通过标签的width和height属性来设置，不能够使用css 来设置宽高
            使用css设置canvas的宽高，是把默认的300*150的画布 拉伸到了你设置的宽度
            oMyCanvas.getContext("2d"):获取画笔
            CTX.beginPath():笔下落或提起笔在落笔
            CTX.moveTo(100,100)：确定一个起点坐标
            CTX.lineTo(300,100)：绘画直线，两个点之间的连线
            CTX.closePath()：关闭路径  用来闭合路径
            CTX.fillStyle  = "pink";
            CTX.fill();填充，如果不设置颜色，默认黑色
            CTX.strokeStyle = "green":笔颜色;
            CTX.lineWidth = "4";
            CTX.stroke();//描边
            CTX.lineCap： 设置线段末端，在描边方法执行之前
                        CTX.lineCap = 'butt';//默认值 以矩形形态结束
                        CTX.lineCap = 'round';//以线段的边缘中心点为圆心,一半的宽度为半径  绘制一个圆  添加在首位
                        CTX.lineCap = 'square';//以线段的边缘宽度为宽,一半的宽度高  绘制一个矩形 添加在首位
            CTX.lineJoin：线段连接处也在stroke方法调用之前设置
                        CTX.lineJoin = 'miter';//默认值 尖角
                        CTX.lineJoin = 'round';//圆角
                        CTX.lineJoin = 'bevel';//平角
            CTX.rect(100,100,200,200)：绘制矩形，4个参数，分别是 左上角的x位置  左上角的y的位置  宽度 高度
                        CTX.strokeStyle = "purple";
                        CTX.lineWidth = 4;
                        CTX.strokeRect(100,100,200,200);//绘制矩形
                        CTX.fillStyle = "red";
                        CTX.fillRect(100,100,200,200);//绘制矩形
            CTX.arc(250,250,100,35*Math.PI/180,250*Math.PI/180,true):绘制一个圆形  6个参数,圆心的x   圆心的y   圆的半径  圆的起始角度(写成弧度)  圆的结束角度  顺时针还是逆时针（true代表逆时针  false代表顺时针）
            CTX.arcTo(250,100,250,150,50):绘制一段圆弧，并不是将某个角变成弧度  5个参数 ，分别是  起始位置坐标（拐角点坐标x，拐角点坐标x）  结束位置坐标（x,y） ,半径的长度
            CTX.quadraticCurveTo(183,116,265,47):4个参数，分别是 控制点的 x  y   和 结束点的x  y
            CTX.bezierCurveTo(240,125,222,17,323,40):6个参数  控制点1 的 x和y   控制点2的x和y    结束点的x和y
            CTX.clearRect(60,60,100,100):清除画布，每次清除都是一个矩形区域，参数和rect方法参数一致
            CTX.rotate(30 * Math.PI/180):旋转  参数是一个弧度，而不是角度
            CTX.translate(250,250):改变坐标轴的位置，移动到原来画布的250,250的位置变成原点
            CTX.scale(0.5,0.5):缩放  x和y分别设置
            CTX.createLinearGradient(100,100,300,300):4个参数，分别是两个连线点的坐标，在两个连线之间进行渐变,返回一个渐变对象
            LinearG.addColorStop(0,"red")：添加渐变节点 第一个参数是1-0  渐变的位置  第二个参数是颜色
            CTX.createRadialGradient(150,250,100,400,250,100)：6个参数，分别代表两个圆，渐变就在第一个圆的左边到第二个圆的左边进行径向渐变
            CTX.save()：存档（画布坐标，画笔形态）
            CTX.restore()：恢复存档
            绘制文字：
                    CTX.font = "bold 60px SimSun";设置画笔的文字样式            
                    CTX.textAlign = "start";//默认
                    CTX.textAlign = "end";
                    CTX.textAlign = "center";
                       设置文字的水平对齐方式  以绘制文字时 设置的x坐标为参考点            
                    CTX.textBaseline = 'top'
                    CTX.textBaseline = 'middle'
                    CTX.textBaseline = 'bottom'
                       设置文字的垂直对齐方式
                    CTX.fillText("尚硅谷",100,100);
                    CTX.strokeText("尚硅谷",100,100);
                    绘制文字
               绘制阴影：
                       CTX.shadowColor = "#000";//阴影颜色
                    CTX.shadowBlur = 6;//模糊度
                    CTX.shadowOffsetX = 10;//x轴偏移值
                    CTX.shadowOffsetY = 10;//y轴偏移值
                    CTX.fillStyle = "red";
                    CTX.fillRect(400,300,200,100);
            图形组合方式：
                    在新图和旧图绘制中间，可以控制图形组合方法 globalCompositeOperation 是CTX的属性
                    CTX.globalCompositeOperation = "source-over";//表示新图覆盖在旧图之上
                    CTX.globalCompositeOperation = "destination-over"//表示旧图覆盖在新图之上
                    CTX.globalCompositeOperation = "lighter"//相交处颜色混合
                    CTX.globalCompositeOperation = "xor"//  相交处透明
            CTX.drawImage(oImg,100,100,200,200):绘制图片，5个参数  img节点 图片的x 位置   图片的y位置  图片的宽和图片的高
            CTX.getImageData(150,150,100,100)：获取像素点，4个参数  和rect方法的参数一致，返回一个所以像素点的数组  每一个像素点4个值  分别对应r  g  b  a
26.音视频(video)：
    音视频的DOM属性：
        oVid.currentTime：获取或设置当前的播放时间
        oVid.duration：获取总时长
        oVid.muted：设置或者返回是否静音    true静音  false不是静音
        oVid.paused：是否被暂停   true是   false不是
        oVid.playbackRate=0.6：设置或返回播放速度
        oVid.volume:设置或返回音量   值范围0到1
        oVid.ended：是否播放结束  true是  false不是
    音视频的方法：
        oVid.play()：控制视频播放
        oVid.pause()：控制视频暂停
        oVid.load()：控制视频返回最初
    音视频的事件：
        oVid.onplay：播放事件
        oVid.onpause：暂停事件
        oVid.ontimeupdate：播放时间变化
        oVid.onended：视频结束
        oVid.onvolumechange：视频声音变化
        oVid.onloadedmetadata：视频元数据加载完成  可以看见视频总时间

27.typeof和instanceOf
    typeof 对于原始类型来说，除了 null 都可以显示正确的类型
    typeof 对于对象来说，除了函数都会显示 object，所以说 typeof 并不能准确判断变量到底是什么类型
        typeof 1 // 'number'
        typeof '1' // 'string'
        typeof undefined // 'undefined'
        typeof true // 'boolean'
        typeof Symbol() // 'symbol'
        typeof [] // 'object'
        typeof {} // 'object'
        typeof console.log // 'function'
    
    instanceOf返回值:
        true/false
        a instanceOf b:a的__proto__(沿着原型链一直往上找)是否在b的prototype上
        
    补充（检测元素类型）：
        Object.prototype.toString.call(target).slice(8, -1)

28.ES6/ES8/ES9
    1)let关键字
        1. 与var 类似,用于声明变量
        2. 存在块作用域,不能重复声明
        3. 不会预处理,不存在声明提升
    2)const关键字
        1. 定义一个常量,该常量不能修改
        2. 存在块作用域,不能重复声明
        3. 不会预处理,不存在声明提升
    3)解构赋值
        1. 理解:从对象或数组中提取数据,并赋值给变量(多个)
        2. 对象的解构赋值: let {m,n}={m:'a',n:'b'}
        3. 对象的解构赋值: let {m:n}={m:'a'} //对象m的值给m重命名n
        4. 对象的解构赋值: let {m:{f}}={m:{f:"a"}} //对象m的值给m,在对m解构复值
        5. 数组的解构赋值: let [a,b]=[10,'测试']
    4)模版字符串
        1. 用 ``简化字符串的拼接
        2. ${xxx}可以解析js代码
    5)简化对象的写法
        1. 对象属性名与属性值一样，可以省略属性值
            let name='小明';
            var obj={name}
        2. 简写对象方法
            原来：               
                var obj={
                    sayHi:function(){
                      console.log('您好')
                    }
                }
            现在：
                var obj={
                    sayHi(){
                      console.log('您好')
                    }
                }
    6)箭头函数
        1. 作用: 定义匿名函数
        2. 基本语法: ()=>{console.log('xxxx')}
        3. 参数
            1. 没有参数小括号不能省略
            2. 一个参数小括号可以省略 
            3. 多个参数小括号不能省略
        4. 函数体
            1. 一条语句大括号可以省略，默认返回值是该语句
            2. 一条语句有大括号，需要手动写return
            3. 函数体如果有多个语句,大括号不能省略
        5. this
                    箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候外层函数的this就是它的this
             扩展理解: 箭头函数的this看外层的是否有函数,如果有,外层函数的this就是内部箭头函数的this,如果没有则this是window
    7)三点运算符
        1.打包(打包后的数组为真数组,代替aguments(伪数组))
            function f1(...args) {
              console.log(args) 
            }
            f1(1, 2, 3, 4, 5, 6)
        2.拆包
            let arr1 = [10, 20]
            let arr2 = [10, ...arr2, 20]
            arr2=[10,10,20,20]
    8)形参默认值
        function Person(name = '小明', age = 20) {}    
    9)class
        语法：
            class Person{
                // 类的私有属性
                static set(){};
                //添加在原型上
                set(){};
                //添加在实列对象上
                set=function(){}
            }
        1. 通过class定义类/实现类的继承
        2. 通过extends来实现类的继承
        3. 在类中通过constructor定义构造方法
        4. 通过super调用父类的构造函数
        5. 重写从父类继承的一般方法
        6. 通过new 来创建类的实例
    10)for-of（遍历值）
        for (let key of Objs) {}
    10)Generator函数
        function *foo(x) {
        let y = 2 * (yield (x + 1))
        let z = yield (y / 3)
        return (x + y + z)
        }
        let it = foo(5)
        console.log(it.next())   // => {value: 6, done: false}
        console.log(it.next(12)) // => {value: 8, done: false}
        console.log(it.next(13)) // => {value: 42, done: true}
        1.首先 Generator 函数调用和普通函数不同，它会返回一个迭代器
        2.当执行第一次 next 时，传参会被忽略，并且函数暂停在 yield (x + 1) 处，所以返回 5 + 1 = 6
        3.当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参，yield 永远返回 undefined。此时 let y = 2 * 12，所以第二个 yield 等于 2 * 12 / 3 = 8
        4.当执行第三次 next 时，传入的参数会传递给 z，所以 z = 13, x = 5, y = 24，相加等于 42
    11)async(ES8) 
        async函数是去解决异步回调问题,同步流程表达异步操作,实现原理由generator函数(让异步代码按同步代码的流程来执行的一种手段)封装      
        1. 语法:
            async function foo(){
                await 异步操作;
                await 异步操作;
            }
        2.特点
            async函数返回的总是Promise对象,可以用then方法进行下一步操作
            await是暂停,后面跟着不是Promise对象的话,会像then方法包装成Promise对象
            await后面Promise对象状态为成功是执行下一个await，状态为失败不执行下面await
            await后面Promise对象状态全部为成功时，async函数返回的Promise对象状态为成功，否则为失败
               promise成功的value: 函数执行时候没有错误,那么return 的就是value,或者最后一个await前面的值就是value
            promise失败的reason:函数执行的时候出错的原因或者手动抛出错误或者返回一个失败的promise
    12)promise对象(ES9)(配合async/await专门拿异步处理的结果)
        Promise 是一个解决异步代码按照同步流程执行的方案，配合async函数用来解决异步回调地狱问题（消除回调函数，以同步方式表达异步代码）

                    特点：
          1）怎么创建promise对象？
              new Promise((resolve,reject)=>{})  默认是pending
              Promise.resolve() 
                      默认返回一个成功的promise对象
                      参数如果是一个promise对象，那么返回一个的promise对象与传入的promise对象状态一致
                      Promise.resolve(new Promise((resolve,reject)=>{}))
              Promise.reject() 
                      默认返回一个失败的promise对象
                    参数如果是一个promise对象，那么也返回一个失败的promise对象，结果值是promise对象
                      Promise.resolve(new Promise((resolve,reject)=>{}))
          2） 状态：
              1. pending 初始化状态(实例对象状态)
              2. resolved / fulfilled 成功状态
              3. rejected 失败状态

！！                      注意：
                        同一时间，只能是一个状态
                        只能由初始化状态变成成功/失败状态
                        不能由成功变成失败，也不能由失败变成成功
                        （状态初始化为pending，只能改变一次，要么成功，要么失败）
          3） 结果值：内部的结果值(value/reason)
              resolve(value)
              reject(reason)
          4）怎么判断promise对象的状态？
                then() / catch()          
!!        4）怎么得到promise对象内部的结果值？(如果链式调用then/catch,那么其参数就是上个then/catch的返回值或者返回的promise对象内部的结果值或者是throw抛出的错误)
                  1.then((value) => {},(reason) => {}) / await
                      then()方法，第一个回调函数promise对象的状态成功时执行，第二个回调函数promise对象的状态失败时执行
          
                2.then((value) => {}) / await
                  catch((reason) => {})
                    
!!                注意：
                    then()/catch()方法默认返回成功状态promise对象，
                    返回值如果是非promise对象，那么相当于返回了一个成功的promise对象，返回的promise对象的值为返回值
                          什么时候会返回失败状态promise对象呢？
                            1. 方法中函数的返回值是一个失败状态的promise对象
                                return Promise.reject();
                            2. 方法报错
                                throw 'error';
                              除了以上两个方式，默认就是成功promise
            
          5)其他方法：
                Promise.all([promise1, promise2...])//全部成功才成功
                                返回值是一个新的promise对象，新promise对象状态看传入的promise
                                  如果传入的promise状态都是成功的状态，新promise也成功,
                                  内部的结果值,就是传入的promise成功状态内部的结果值（多个值用数组储存）
                                  如果传入的promise状态有一个失败，新promise立即失败
                                  内部的结果值,就是传入的promise失败状态内部的结果值(一个值)
                Promise.race([promise1, promise2...])//那个先发生变化
                                返回值是一个新的promise对象，新promise对象状态看传入的promise
                                  只看传入的n个promise，哪一个传入promise状态先发生变化
                                  新promise和先发生变化promise的状态一致
                                 内部的结果值,就是先发生变化的promise对象内部的结果值
                Promise.allSettled([promise1, promise2...]) //等全部执行完                   源自ES11/ES2020
                                返回值是一个新的promise对象，一定是成功状态（会等所以传入的promise状态发生改变在返回）
                      promise对象内部状态值，包含传入的n个promise对象的状态值    (以对象的形式储存)        

29.闭包
    1) 什么是闭包？
        函数嵌套函数，内部函数引用了外部函数的变量就形成了闭包了(定义函数的作用域 和 调用的作用域不是同一个)
    2) 闭包的作用？
          1.延长外部函数变量对象的生命周期
        2.让函数外部可以操作(读写)函数内部的数据(变量/函数)
       3) 闭包的缺点
           延长外部函数变量对象的生命周期(不及时清除容易造成内存溢出、泄漏)
    4) 内存泄漏与溢出
        泄漏：没用的内存没用被释放掉
        溢出：被申请的内存过多

30.总结
    1）JS的构成：ECMAScript/DOM/BOM
    2）js
        1.JS数据类型 
            JS中的原始数据类型:string,number,undefined,null,boolean,object,Symbol,bigInt
            JS中的简单(基本)数据类型:string,number,boolean，undefined,null
            JS中的复杂类型:Object,Array,Function,RegExp,Date
            jS中的基本包装类型:string,number,boolean  (本身可以是基本类型,关键时刻可以当对象使用)
        2.事件循环机制
        3.执行上下文和作用域
        4.原型与原型链
        5.内置对象：函数/Object/Array/String/Math/Date/Boolean/Number/Map/Set/正则/arguments对象/JSON对象/
            event对象/classList对象
        6.ES6/8/9
            1)let关键字
      2)const关键字
      3)解构赋值
      4)模版字符串
      5)简化对象的写法
            6)箭头函数
      7)三点运算符
        8)形参默认值
        9)class
        10)for-of（遍历值）
        11)async(ES8) 
            12)promise对象(ES9)
        7.其它：闭包
    2）DOM
        1.DOM0和DOM2事件/事件流    
        2.事件委托
        3.获取窗口的大小
        4.获取文档的大小
        5.获取元素大小        
        6.获取元素位置
        7.访问元素节点属性
        8.元素节点操作
        9.属性的节点操作
    3）BOM
        1.navigator对象
        2.location对象
        3.history对象
        4.window对象
        5.H5存储技术
        6.计时器/3种弹窗
    4)其它：canvas画布/Web workers