1、简介

（1）ECMAScript和JavaScript的关系

ECMAScript 也是一门脚本语言，缩写为ES，通常看做JavaScript的标准化规范ECMAScript6.0是JavaScript语言的下一代标准，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

但实际上JavaScript是ECMAScript的扩展语言，因为ECMAScript只提供了最基本的语法，通俗点说只是约定了我们的代码如何编写，比如定义变量和函数，循环和分支…它只是停留在语言层面，并不能用来完成我们应用中的实际功能开发。

在浏览器环境中，JavaScript = ECMAScript + BOM + DOM

2、基本语法

ES标准中不包含DOM和BOM的定义，只涵盖基本数据类型、关键词、语句、运算符、内建对象、内建函数等通用语法。

（1）let声明变量

    // var 声明的变量没有局部作用域
    // let 声明的变量 有局部作用域
    {
    var a = 0
    let b = 1
    }
    console.log(a) // 0
    console.log(b) // ReferenceError: b is not defined
     
    // var 可以声明多次
    // let 只能声明一次
    var m = 1
    var m = 2
    let n = 3
    let n = 4
    console.log(m) // 2
    console.log(n) // Identifier 'n' has already been declared
     
    // var 会变量提升
    // let 不存在变量提升
    console.log(x) //undefined
    var x = "apple"
    console.log(y) //ReferenceError: y is not defined
    let y = "banana"

（2）const声明常量

    // 1、声明之后不允许改变
    const PI = "3.1415926"
    PI = 3 // TypeError: Assignment to constant variable.
     
    // 2、一但声明必须初始化，否则会报错
    const MY_AGE // SyntaxError: Missing initializer in const declaration

（3）解构赋值

解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语意更加清晰明了，也方便了复杂对象中数据字段获取。

    //1、数组解构
    // 传统
    let a = 1, b = 2, c = 3
    console.log(a, b, c)
    // ES6
    let [x, y, z] = [1, 2, 3]
    console.log(x, y, z)
     
    //2、对象解构
    let user = {name: 'Helen', age: 18}
    // 传统
    let name1 = user.name
    let age1 = user.age
    console.log(name1, age1)
    // ES6
    let { name, age } = user//注意：解构的变量必须是user中的属性
    console.log(name, age)

（4）模板字符串

模板字符串相当于加强版的字符串，用反引号 ` ，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

    // 1、多行字符串
    let string1 = `Hey,
    can you stop angry now?`
    console.log(string1)
    // Hey,
    // can you stop angry now?
     
    // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
    let name = "Mike"
    let age = 27
    let info = `My Name is ${name},I am ${age+1} years old next year.`
    console.log(info)
    // My Name is Mike,I am 28 years old next year.
     
    // 3、字符串中调用函数
    function f(){
        return "have fun!"
    }
    let string2 = `Game start,${f()}`
    console.log(string2); // Game start,have fun!

（5）声明对象简写

    const age = 12
    const name = "Amy"
    // 传统
    const person1 = {age: age, name: name}
    console.log(person1)
    // ES6
    const person2 = {age, name}
    console.log(person2) //{age: 12, name: "Amy"}

（6）定义方法简写

    // 传统
    const person1 = {
        sayHi:function(){
            console.log("Hi")
        }
    }
    person1.sayHi();//"Hi"
     
    // ES6
    const person2 = {
        sayHi(){
            console.log("Hi")
        }
    }
    person2.sayHi() //"Hi"

（7）对象拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

    // 1、拷贝对象
    let person1 = {name: "Amy", age: 15}
    let someone = { ...person1 }
    console.log(someone) //{name: "Amy", age: 15}
     
    // 2、合并对象
    let age = {age: 15}
    let name = {name: "Amy"}
    let person2 = {...age, ...name}
    console.log(person2) //{age: 15, name: "Amy"}

（8）函数的默认参数

    function showInfo(name, age = 17) {
        console.log(name + "," + age)
    }
    // 只有在未传递参数，或者参数为 undefined 时，才会使用默认参数
    // null 值被认为是有效的值传递。
    showInfo("Amy", 18) // Amy,18
    showInfo("Amy", "") // Amy,
    showInfo("Amy", null) // Amy, null
    showInfo("Amy")       // Amy,17
    showInfo("Amy", undefined) // Amy,17

（9）不定参数

不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数表示符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数。

    function f(...values) {
        console.log(values.length)
    }
    f(1, 2) //2
    f(1, 2, 3, 4) //4

（10）箭头函数

箭头函数提供了一种更加简洁的函数书写方式。
基本语法是：参数 => 函数体

    settimeout(() => {},1000)
     
    // 传统
    var f1 = function(a){
        return a
    }
    console.log(f1(1))
     
    // ES6
    var f2 = a => a
    console.log(f2(1))
     
    // 当箭头函数没有参数或者有多个参数，要用 () 括起来。
    // 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
    // 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
    var f3 = (a,b) => {
        let result = a+b
        return result
    }
    console.log(f3(6,2)) // 8
    // 前面代码相当于：
    var f4 = (a,b) => a+b

（11）Promise承诺

在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    </head>
    <body>
     
    </body>
    </html>
    <script>
    /*
        页面需要在服务器上运行
            最开始open in browser 访问是本地磁盘的文件
            安装live Server 插件
            运行 选择 open with live server
    */
    /**/
    /*
        问题:所有的请求都是异步 异步的问题:第二个请求需要用到第一个请求的返回值
            有可能第二个请求先会返回数据
        解决:通过请求的嵌套来解决
            将请求2嵌套在请求1成功的回调函数里面
        问题:如果请求过多，只能在成功的回调函数继续嵌套， 前端人员嵌套的噩梦
            代码的可读性非常的差
        使用promise，来解决嵌套的噩梦
            promise解决代码格式问题
    */
    console.log("请求开始----------------------");
    setTimeout(() => {
        //请求1 student.json
        $.ajax({
            url:"json/student.json",
            data:{},
            type:"get",
            dataType:"json",
            success(obj) {
     
                console.log("请求1执行完成---------------");
                console.log(obj);
     
                //请求2 user.json
                $.get("json/user.json",obj1 => {
                    console.log("请求2执行完成---------------");
                    console.log(obj1);
                },"json")
            }
        })
    }, 2000);
     
    </script>

Promise是异步编程的一种解决方案。从语法上说，Promise是一个对象，从它可以获取异步操作的响应消息。

    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery-3.6.0.min.js"></script>
    </head>
    <body>
     
    </body>
     
    </html>
    <script>
        console.log("请求开始----------------------");
     
        //创建一个promis对象
        var p = new Promise((resolve, reject) => {
            //两秒过后执行请求1 student.json
            setTimeout(() => {
                //请求1 student.json
                $.ajax({
                    url: "json/student.json",
                    data: {},
                    type: "get",
                    dataType: "json",
                    //成功的回调函数
                    success(obj) {
     
                        console.log("请求1执行完成---------------");
                        console.log(obj);
     
                        resolve(obj);
     
                    },
                    //失败的回调函数
                    error() {
                        console.log("请求1失败了-----------------");
                        reject();
                    }
                })
            }, 2000)
        })
     
        //请求1执行成功 会执行.then
        p.then(data => {
            console.log("a()执行了");
            console.log(data);
            //请求2 user.json
            $.get("json/user.json", obj => {
                console.log("请求2执行成功--------------------");
                console.log(obj);
            }, "json")
        }).catch(_ => {// 请求1失败 会执行.catch
            console.log("b()执行了");
        })
     
        console.log("请求结束----------------------");
    </script>