ES6相关操作

一.JavaScript的基础语法

1.Demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript基础语法</title>
    <script>
       function firstMethod(){
            var d=new Date()
            d.setDate(d.getDate()-3)
            alert(d.toString())
       }
    </script>
    <script src="javascript.js"></script>
</head>
<body>
    <input type="button" value="按钮1" onclick="alert('Hello World')">
    <br>
    <input type="button" value="按钮2" onclick="firstMethod()">
    <br>
    <input type="button" value="按钮3" onclick="method1()">
    <br>
    基础
    <br>
    常量和变量
    <br>
    声明变量的语法结构:var 变量名=初始值;
    变量名(标识符):由字母，数字，下划线，$符号组成，不能以数字开头，不能是系统的关键字，常量名大写
    <br>
    注释：//和/**/
    <br>
    Javascript大小写敏感
    数据类型
    <br>
    <pre>
    数据类型:    
        基本类型:string number boolean
        特殊类型:null undefined
        复杂类型:Date Math Array Object   
    </pre>
    <br>
    数组的操作
    <input type="text" id="txtArray" value="123,2,5,96,8,56">
    <input type="button" value="翻转" onclick="method2(1)">
    <input type="button" value="排序(按字母排序)" onclick="method2(2)">
    <input type="button" value="翻转(按数字排序)" onclick="method2(3)">
    <br>
    随机数1-30
    <input type="button" value="1-30随机数" onclick="randomNumber()">
    <br>
    数据类型转换:隐式转换--转换函数
    <br>
    <input type="button" value="隐式转换" onclick="converDate()">
    <br>
    显示转换:parseInt\parseFloat\toString\isNaN(是否是数字)
    <br>
    <input type="text" id="txtDate">
    <input type="button" value="计算平方" onclick="getSquare()">
    <br>
    运算符
    <br>
    == ===严格相等(包括类型)
    三元运算符 表达式?value1:value2
    <br>
    <input type="text" id="txtNumber" onblur="guess()">
    <br>
    流程控制语句:条件(if/else--switch/case) 循环(for while)
    <br>
    <input type="button" value="累加1到50的和" onclick="getSum()">
    <br>
    用户名(3-5位字母和数字的组合)
    <input type="text" id="txtName" onblur="judgeName()">
    <br>
    <input type="button" value="方法重载" onclick="tryArguments(10,10)">
    <br>
    <input type="button" value="函数的定义方式" onclick="testFunction()">
    <br>
    <input type="button" value="1" onclick="cal(this.value)">
    <input type="button" value="2" onclick="cal(this.value)">
    <input type="button" value="3" onclick="cal(this.value)">
    <input type="button" value="4" onclick="cal(this.value)">
    <input type="button" value="+" onclick="cal(this.value)">
    <input type="button" value="-" onclick="cal(this.value)">
    <input type="button" value="=" onclick="cal(this.value)">
    <input type="text" id="txtData1">
    
</body>
</html>

二.BOM对象:浏览器对象模型

2.Demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM对象</title>
    <script>
        //删除提示框
        function deleteDate(){
            var r=window.confirm("你是否真的要删除")
            alert(r)
        }
        //打开窗口
        function openWin(){
            window.open("http://www.baidu.com","baidu","width=200,height=300,toolbar=yes")
        }
        //显示时间
        function showTime(){
            var now=new Date()
            document.getElementById("txtTime").value=now.toLocaleTimeString()
        }
        //启动时间
        var timer;
        function startTime(){
            timer=window.setInterval("showTime()",1000)
        }
        //停止函数
        function stopTime(){
            window.clearInterval(timer)
        }
        //定时操作
        function wait(){
            window.setTimeout("alert('hello')",3000)
        }
    </script>
</head>
<body>
    删除提示框
    <input type="button" value="删除文本" onclick="deleteDate()">
    <br>
    打开窗口
    <input type="button" value="打开窗口" onclick="openWin()">
    <br>
    有关时间的操作
    <input type="text" id="txtTime">
    <input type="button" value="显示时间"onclick="showTime()">
    <input type="button" value="启动时间"onclick="startTime()">
    <input type="button" value="停止时间"onclick="stopTime()">
    <input type="button" value="定时操作"onclick="wait()">
</body>
</html>

三.DOM对象:文档对象模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象操作</title>
    <script>
        function testDOM(){
            //页面中由多少个input元素
            var n=document.getElementsByTagName("input").length
            //修改图形
            var imgObj=document.getElementById("img1")
            imgObj.src="2.png"
            //修改链接
            var linkObj=document.getElementById("link1")
            linkObj.innerHTML="AAAAA"
            linkObj.href="http://www.baidu.com"
            //修改段落
            var pObj=document.getElementById("p1")
            pObj.innerHTML="后天也休息"
            pObj.style.color="red"
            pObj.style.backgroundColor="green"
            pObj.style.fontSize="30px"
            //修改标题样式
            var h3Obj=document.getElementById("h31")
            h3Obj.className="mystyle"
            //列表个数
            var ulObj=document.getElementById("ul1")
            var count=0
            for(var i=0;i<ulObj.childNodes.length;i++){
                if(ulObj.childNodes[i].nodeName=="LI"){
                    count++
                }
            }
            alert(count)
        }
    </script>
    <style rel="stylesheet">
        .mystyle{
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <input type="button" value="开始" onclick="testDOM()"><br>
    <img src="1.png" id="img1">
    <a href="#" id="link1">click me</a>
    <p id="p1">明天休息了</p>
    <h3 id="h31">可以利用休息的时间来武装自己</h3>
    <ul id="ul1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

四.综合练习---购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript5综合练习</title>
    <script>
        //增加的函数
        function add(btnObj){
            //得到传入对象的父对象的所有子对象
            var nodes=btnObj.parentNode.childNodes;
            //循环所有的子节点找到文本框对象
            for(var i=0;i<nodes.length;i++){
                var child=nodes[i]
                if(child.nodeName=="INPUT"&&child.type=="text"){
                    var n=parseInt(child.value)
                    n++
                    child.value=n
                }
            }
            //计算小计及总计
            calSum()
        }
        //减少函数
        function sub(btnObj){
           //得到传入对象的父对象的所有子对象
           var nodes=btnObj.parentNode.childNodes;
            //循环所有的子节点找到文本框对象
            for(var i=0;i<nodes.length;i++){
                var child=nodes[i]
                if(child.nodeName=="INPUT"&&child.type=="text"){
                    var n=parseInt(child.value)
                    n--
                    child.value=n
                }
            } 
            //计算小计及总计
            calSum()
        }
        //对表格进行操作
        function calSum(){
            //找到表格中所有的tr
            var tableObj=document.getElementById("table1")
            //获得表格中的所有行
            var rows=tableObj.getElementsByTagName("tr")
            //循环获得每一行
            var total=0//存放总计的值
            for(var i=1;i<rows.length;i++){
                //得到当前行
                var row=rows[i]
                //找到价格
                var price=parseFloat(row.getElementsByTagName("td")[1].innerHTML)
                //找到数量
                var num= parseInt(row.getElementsByTagName("td")[2].getElementsByTagName("INPUT")[1].value)
                //计算小计
                var sum=price*num
                //将计算的小计结果给到小计单元格中
                row.getElementsByTagName("td")[3].innerHTML=sum.toFixed(2)
                //累加总计
                total+=sum
            }
            //将总计的值赋值给总计元素
            document.getElementById("totalPrice").innerHTML=total.toFixed(2)
        }
    </script>
</head>
<body onload="calSum()">
    <table border="1" id="table1">
        <tr>
            <td>名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>小计</td>
        </tr>
        <tr>
            <td>红烧肉</td>
            <td>35</td>
            <td>
                <input type="button" value="-" onclick="sub(this)">
                <input type="text" value="1" readonly>
                <input type="button" value="+" onclick="add(this)">
            </td>
            <td></td>
        </tr>
        <tr>
            <td>锅包肉</td>
            <td>45</td>
            <td>
                <input type="button" value="-" onclick="sub(this)">
                <input type="text" value="2" readonly>
                <input type="button" value="+" onclick="add(this)">
            </td>
            <td></td>
        </tr>
        <tr>
            <td>回锅肉</td>
            <td>25</td>
            <td>
                <input type="button" value="-" onclick="sub(this)">
                <input type="text" value="1" readonly>
                <input type="button" value="+" onclick="add(this)">
            </td>
            <td></td>
        </tr>
    </table>
    总计:<span id="totalPrice"></span>
</body>
</html>

五.级联操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript5综合练习</title>
</head>
<body>
    级联操作:通过一个元素控制另外一个元素中的内容，如省市的选择
    <br>
    省:
    <select id="sel1" onchange="createCities()">
        <option>---请选择---</option>
        <option>北京</option>
        <option>河南</option>
        <option>辽宁</option>
        <option>河北</option>
    </select>
    城市:
    <select id="selCity">
        <option>---请选择---</option>
        
    </select>
    <script>
        //创建数组用于存放城市信息
        var array=new Array()
        array[0]=["请选择"]
        array[1]=["海淀","朝阳"]
        array[2]=["郑州","开封"]
        array[3]=["沈阳","大连","鞍山"]
        array[4]=["石家庄","邯郸"]
        //创建用于选择城市的函数
        function createCities(){
            //获得省份下拉列表中对应的下标值
            var index=document.getElementById("sel1").selectedIndex
            //获得对应省份的城市
            var data=array[index]
            //清除城市中所包含的原选项
            var selCity=document.getElementById("selCity")
            //设置城市子选项的长度为0
            selCity.options.length=0
            //加入新选项
            for(var i=0;i<data.length;i++){
                var obj=new Option(data[i])
                selCity.add(obj)
            }
        }
    </script>
</body>
</html>

六.节点操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点的操作</title>
</head>
<body>
    <form id="form1">
        <input type="button" value="添加节点" onclick="addNewNode()">
    </form>
    <script>
        function addNewNode(){
            //找到表单元素
            var formObj=document.getElementById("form1")
            //添加文本框
            var inputTextObj=document.createElement("input")
            inputTextObj.type="text"
            inputTextObj.value="doudou"
            formObj.appendChild(inputTextObj)
            //添加段落
            var pObj=document.createElement("p")
            pObj.innerHTML="孙桂月"
            formObj.insertBefore(pObj,formObj.firstChild)
            //添加按钮
            var btnObj=document.createElement("input")
            btnObj.type="button"
            btnObj.value="提交"
            //为按钮定义事件
            btnObj.onclick=function(){alert("click me")}
            formObj.appendChild(btnObj)
        }
    </script>
</body>
</html>

七.表格操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格操作</title>
</head>
<body>
    ID:<input type="text" id="txtID">
    Name:<input type="text" id="txtName">
    <input type="button" value="添加" onclick="addRow()">
    <table id="t1" border="1">
        <tr>
            <td>ID</td>
            <td>Name</td>
        </tr>
        <tr>
            <td>1</td>
            <td>doudou</td>
        </tr>
    </table>
    <script>
        function addRow(){
            //获得表格对象
            var t=document.getElementById("t1")
            //获得表格的行数
            var v=t.rows.length
            //在表格中新增一行
            var row=t.insertRow(v)
            //为新增行添加单元格
            var cell1=row.insertCell(0)
            cell1.innerHTML=document.getElementById("txtID").value
            var cell2=row.insertCell(1)
            cell2.innerHTML=document.getElementById("txtName").value

        }
    </script>
</body>
</html>

八.练习----随机点名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <script>
        var interFunc;
        //存放姓名的数组
        var arr=new Array()
        arr[0]="张三"
        arr[1]="李四"
        arr[2]="王五"
        arr[3]="赵六"
        arr[4]="马七"
        arr[5]="侯八"
        //根据下标数获取姓名的函数
        function displayName(index){
            //将获取的姓名赋值给文本框
            document.getElementById("name").value=arr[index]
        }
        //获得随机数的函数
        function getRandom(small,big){
            return small+Math.floor(Math.random()*(big-small+1))
        }
        //整合随机数获取姓名
        function dealFunc(){
            displayName(getRandom(0,(arr.length-1)))
        }
        //运行
        function run(val){
            if(val=="开始"){
                document.getElementById("btn").value="停止"
                //文本框中滚动出现姓名,回调函数，每隔30毫秒调用一次整合函数
                interFunc=setInterval("dealFunc()",30)
            }else{
                document.getElementById("btn").value="开始"
                clearInterval(interFunc)
            }
        }
    </script>
</head>
<body>
    <div align="center">
        <input type="text" id="name" style="width:4em; height:1.2em; font-size: 72px; vertical-align: middle; text-align: center;" readonly>
        <input type="button" id="btn" value="开始" style="width:5em; height:1.2em; font-size: 42px;" onclick="run(this.value)">
    </div>
</body>
</html>

九.变量的声明及特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量的声明及特性</title>
    <style>
        .item{
            width:100px;
            height:50px;
            border:1px solid #000;
            margin-left:20px;
            float:left;
        }
    </style>
</head>
    
<body>
    <script>
        //声明变量
        let a;
        let d,b,c;
        let e=100
        let f=120,g='ilovescript',h=[]
        //注意
        //1.变量不能重复声明
        let star='刘德华'
        //let star='华仔'
        //2.块级作用域 if else while for {}
        {
            let name='周杰伦'
        }
        console.log(name)
        //3.不能在声明前使用
        //console.log(age)
        //let age=20
        // console.log(age)
        // var age=20
        //4.不影响作用域链
        // {
        //     let goods='显示器'
        //     function fn(){
        //         console.log(goods)
        //     }
        //     fn()
        // }
    </script>
    <div>
        <h2>点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        //获得div元素
        let items=document.getElementsByClassName('item')
        //遍历item数组,获得每一个元素，并为元素添加单击事件
        for(let i=0;i<items.length;i++){
            items[i].onclick =function(){
                //设置背景颜色
                items[i].style.backgroundColor='pink'
            }
        }
    </script>
</body>
</html>

十.常量声明及特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常量声明及特点</title>
</head>
<body>
    <script>
        //常量:在程序执行的过程中不会发生改变的值称为常量
        //1.声明常量
        const SCHOOL='东北大学'
        //2.常量的特点
        //2.1.一定要付初始值
        const CORDID=1;
        //2.2常量的名字要大写(潜规则)
        const A=1
        //2.3常量值不能修改
        //A=2
        //2.4可以对数组和对象的元素进行修改
        const team=['A','B','C']
        team.push('D')//向数组中追加数据
    </script>
</body>
</html>

十一.解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值</title>
</head>
<body>
    <script>
        //解构赋值:将复杂结构数据拆解开，与简单结构进行数据交互
        //数组:
        const F4=['小沈阳','赵四','刘能','宋小宝']
        let[f1,f2,f3,f4]=F4
        console.log(f1)
        console.log(f2)
        console.log(f3)
        console.log(f4)
        const zhaobenshan={
            name:'赵本山',
            age:76,
            sex:'男',
            sayHi:function(){
                console.log("我的特长是演小品")
            }
        }
        let {name,age,sex,sayHi}=zhaobenshan
        console.log(name)
        console.log(age)
        console.log(sex)
        sayHi()
    </script>
</body>
</html>

十二.模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字符串</title>
</head>
<body>
    <script>
        //模板字符串:ES6引入新的字符串的方式"",'',``
        //1.声明
        let str=`我是ES6中增加的定义字符串的方式`
        console.log(str,typeof str)
        //2.特点
        //2.1在字符串中可以出现换行
        let str1=`<ul>
            </ul>`
        //2.2.变量拼接
        let name1='鹊刀门2'
        let out =`${name1}是一部具备东北特色喜剧`
        console.log(out)
    </script>
</body>
</html>

十三.函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
</head>
<body>
    <script>
        //函数：JavaScript函数用于执行特定任务或计算功能的代码块。可以重复使用的代码块
        //语法结构:function 函数名(参数列表){执行过程}
        //特点:函数可以接收输入的参数,并可以通过return关键字返回数据
        //优势:函数的优势在于提高代码的可重用性和模块化编程
        //声明一个函数
        let fn=function(a,b){
            console.log(a,b,a+b)
            return a+b
        }
        let sum=fn(1,2)
        console.log(sum)
        //ES6允许使用箭头函数
        let fn1 =(a,b)=>{
            return a+b
        }
        let sum1=fn1(1,2)
        console.log(sum1)
        /*
        注意:关于this的使用
        在箭头函数中，this是在定义函数的时候绑定的，而不是在执行函数的时候绑定的。
        this指向的固定化，是因为箭头函数根本没有自己的this，所以不能用作构造函数
        */
        // var x=1;
        // var obj={
        //     x:2,
        //     sayHi:()=>{
        //         console.log(this.x)
        //     }
        // }
        // obj.sayHi()
        // //对比普通函数
        // var obj={
        //     x:2,
        //     sayHi:function(){
        //         console.log(this.x)
        //     }
        // }
        // obj.sayHi()
        //注意：箭头函数不能构造实例化对象
        // let Person=(name,age)=>{
        //     this.name=name;
        //     this.age=age;
        // }
        // let me=new Person('小沈阳',30)
        // console.log(me)
        // let Person=function(name,age){
        //     this.name=name;
        //     this.age=age;
        // }
        // let me=new Person('小沈阳',30)
        // console.log(me)
        //注意:箭头函数不能使用arguments
        //arguments解释:不用形参(函数的参数列表)，通过arguments可以记录传入的实参。
        // function showArguments(){
        //     console.log(arguments[0],arguments[1])
        // }
        // showArguments(1,2)
        // //注意：箭头函数可以简写
        // let pow=(n)=>n*n
        // console.log(pow(9))
        
    </script>
    <div id="box" style="width: 200px;height: 200px;background-color: aquamarine;"></div>
    <script>
        //箭头函数的应用案例
        //需求1：单击div 2s后颜色变换
            //获得页面中id值为div的元素
            let box =document.getElementById("box")
            //为box元素添加单击事件
            // box.addEventListener("click",function(){
            //     let _this=this
            //     //定时函数
            //     setTimeout(function(){
            //         _this.style.background='pink'
            //     },2000)
            // })
            //ES6箭头函数实现，箭头函数可以找到事件源
            box.addEventListener("click",function(){
                //定时函数
                setTimeout(()=>{
                    this.style.background='pink'
                },2000)
            })
            //需求2：从数组中获取偶数的元素
            const arr=[1,6,9,10,100,21]
            //filter()过滤器，用于遍历数组的每一个元素
            // const result=arr.filter(function(item){
            //     if(item%2==0){
            //         return true;
            //     }else{
            //         return false;
            //     }
            // })
            // console.log(result)
            //使用箭头函数完成需求
            // const result=arr.filter((item)=>{
            //     if(item%2==0){
            //         return true;
            //     }else{
            //         return false;
            //     }
            // })
            //简易写法
            const result=arr.filter(item=>item%2==0)
            console.log(result)
    </script>
</body>
</html>

十四.函数参数的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数参数的设置</title>
</head>
<body>
    <script>
        //在ES6中允许参数赋初值
        function add(a,b,c=3){

        }
        add(1,2)
        //ES6中支持参数解构
        function connection({host='127.0.0.1',username,password,prot}){
            // let host=options.host
            // let username=options.username

        }
        connection({
            host:'192.168.1.1',
            username:'root',
            password:'123123',
            port:3306
        })
        //ES6引入了rest参数,用于替换arguments,注意...args写在最后
        function date(a,b,...args){
            console.log(a)
            console.log(b)
            console.log(args)
        }
        date('小沈阳','赵四','刘能','宋小宝')


    </script>
</body>
</html>

十五.数组的相关操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的相关操作</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        //数组的合并
        const fenghuang = ['曾毅','玲花']
        const kaixin = ['沈腾','马丽','艾伦']
        const kuajie = fenghuang.concat(kaixin)
        const kuajie1 = [...fenghuang,...kaixin]
        console.log(kuajie1)
        //数组的克隆
        const fh = [...fenghuang]
        //将伪数组转换成真正的数组数据
        const divs = document.querySelectorAll('div')//页面中所有的div元素
        const divArr = [...divs]
        console.log(divArr)
    </script>
</body>
</html>

十六.数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型</title>
</head>
<body>
    <script>
        //数据类型：在程序执行的过程中可以操作哪些数据种类
        //在JavaScript中共提供了7种基本数据类型
        
        /*
        USONB
        u---undefined 空(什么都没有)
        s---string  字符串 symbol 唯一(ES6中新增的)
        o---object  对象
        n---number  数字 null 空值
        b---boolean 布尔

        Symbol特点:
            1.值是唯一的
            2.不能与其他的数据进行运算
            3.定义的对象属性不能使用for......in循环遍历
        */
        //创建
        let a=Symbol()
        console.log(a,typeof a)
        let b=Symbol('wahaha')
        let b1=Symbol('wahaha')
        console.log(b===b1)
        let c=Symbol.for('wahaha')
        let c1=Symbol.for('wahaha')
        console.log(c===c1)
        //let result=a+100
        //let result1=b>'gaga'
        //使用场景
    var age=Symbol()
    var person={
        [Symbol('name')]:'zs',
        [age]:12
    }
    console.log(person.name)
    console.log(person.age)
    //symbol内部提供了哪些内置函数
    </script>
</body>
</html>

十七.Promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise</title>
</head>
<body>
    <script>
        //Promise是ES6引入的异步编程工具。
        // 语法上Promise是一个构造函数,用于封装异步操作并可以获取操作成功或失败的结果
        //Promise构造函数:Promise(excutor){}
        //Promise的常用函数:then,catch
        //实例化Promise对象(创建Promise工具)
        //     let data="请求数据"//该数据为服务器的数据
        //     reject(data)
        // })
        // //调用Promise的then方法
        // p.then(function(value){
        //     //编写响应值

        // })
        
       

    </script>
</body>
</html>

十八.ECMA的相关操作

#一·ECMA的相关介绍

##1.什么是ECMA，欧洲计算机制造商协会(谷歌，微软，IBM)，这个组织的目标是评价，开发和认可电信和计算机的相关标准。1994年更名为ECMA

##2.官网

https://ecma-international.org/

#二.ECMAScript相关介绍

##1.什么是ECMAScript

由ECMA国际通过ECMA-262标准化的脚本程序设计语言,ECMA国际制定了许多标准,而ECMA-262是其中之一

#三.ECMAScript262的发展历史

##1.官网

1.https://ecma-international.org/publications-and-standards/standards/ecma-262/

##2.各版本特点

-第1版本 1997年制定了语言的基本语法

-第2版本 1998年略

-第3版本 1999年引入了正则表达式，异常处理，格式化输出，IE开始支持。

-第4版本 2007年略

-第5版本 2009年引入严格模式，JSON，扩展对象，数组，原型，字符串，日期等函数

-第6版本 2015年模块化，面向对象语法，Promise,箭头函数，let,const,数组解构赋值等

-第7版本 2016年幂运算符，数组拓展，async/await关键字

-第8版本 2017年 async/await关键字，字符串扩展

-第9版本 2018年对象解构赋值，正则扩展

-第10版本 2019年扩展对象，数组方法

十九.使用Promise封装Ajax

//创建可以读取外部文件的工具
const fs=require('fs') 
     //   fs.readFile('为学.md',(err,data)=>{
     //        if(err) throw err;//如果读取文件失败则输出错误信息
     //        console.log(data.toString())
     //   })
//将读取文件的过程封装到Promise中
const p=new Promise(function(resolve,reject){
     fs.readFile('为学.md',(err,data)=>{
          //判断是否读取失败
          if(err) reject(err);
          //如果读取成功
          resolve(data)
     })
})
//配合promise展示数据
p.then(function(value){
     console.log(value.toString())
},function(reason){
     console.log("读取失败!!")
})
//使用Promise封装Ajax
//Ajax是ES5中提供的用于异步提交的工具，可以通过该工具实现客户端与服务器端进行数据交互
//Ajax也称为局部提交或局部刷新
//1.创建Ajax对象
const xhr=new XMLHttpRequest()
//2.配置访问地址及访问方式
xhr.open("GET","http://www.baidu.com")
//3.发送数据
xhr.send('向服务端发送的数据')
//4.处理响应结果
xhr.onreadystatechange=function(){
     //判断响应协议值
     if(xhr.readyState===4){//4有返回值
          if(xhr.status >=200 &&xhr.status<300){
               //表示成功
               console.log(xhr.response)//打印数据
          }else{
               //表示失败
               console.error(xhr.status)
          }

     }
}
//使用Promise封装Ajax
const p1=new Promise((resolve,reject)=>{
     //1.创建Ajax对象
     const xhr=new XMLHttpRequest()
     //2.配置访问地址及访问方式
     xhr.open("GET","http://www.baidu.com")
     //3.发送数据
     xhr.send('向服务端发送的数据')
     //4.处理响应结果
     xhr.onreadystatechange=function(){
          //判断响应协议值
          if(xhr.readyState===4){//4有返回值
               if(xhr.status >=200 &&xhr.status<300){
                    //表示成功
                    resolve(xhr.response)//打印数据
               }else{
                    //表示失败
                    reject(xhr.status)
               }

          }
     }
})
//指定回调
p1.then(function(value){
     console.log(value)
},function(reason){
     console.log(reason)
})