1、let声明变量

//1.var声明的是全局变量,let声明的是局部变量
<script>
        //var 声明的变量往往会越域
        //let 声明的变量有严格局部作用域
        {
            var a = 1;
            let b = 2;
        }
        console.log(a);//1
        console.log(b);//ReferenceError: b is not defined
</sciprt>

//2.var声明的变量名相同后一个会把前一个的值给覆盖,let不能声明多个相同的变量名。
<script>
 	    //var 可以声明多次
        //let 只能声明一次
        var n = 1;
        var n = 2;
        let m = 3;
        //let m = 4;
        console.log(n);
        console.log(m);  
</script>

//3.var初始化的时候可以不赋值，let初始化必须赋值。通过1.3看来，可以把var看成Java的成员变量,let看成Java的局部变量。
<script>
        //var会变量提升
        //let不存在变量提升
        console.log(x);//undefined
        var x = 10;
        console.log(y);//can't access lexical declaration 'y' before initialization
        let y = 20;
</script>

2、const声明常量(只读变量)

//相当于Java里面的final
<script>
        //let
        //1.声明之后不允许改变
        //2.一旦声明必须初始化，否则会报错。
        const a = 10;
        a = 20;
        console.log(a);//Assignment to constant variable.
</sciprt>    

3、解构表达式

数组解构

<script>
    let arr = [1,2,3];
    //以前写法
    // let a = arr[0];
    // let b = arr[1];
    // let c = arr[2];
    //现在写法
    let [a,b,c] = arr;
    console.log(a,b,c);
</script>

对象解构

<script>
     const persion = {
            name: "张三",
            age: 20,
            language: ['java','ASP.NET','PHP']
        }
        //以前写法
        // const name = persion.name;
        // const age = persion.age;
        // const language = persion.language;
        // console.log(name,age,language);
        //现在写法
        // const {name,age,language} = persion;
        // console.log(name,age,language);
        //把name获得的值赋值给abc
        const {name:abc,age,language} = persion;
        console.log(abc,age,language);
</script>

4、字符串扩展

API

<script>
	    const es  = "hello.es";
        console.log(es.startsWith("hello")); //以..为开头
        console.log(es.endsWith("es"));//以.为结尾。
        console.log(es.includes("h"));//包含,包括
</script>

字符串模板

<script>
        //多行字符串
        let ss = `
            <font color='red'>helloworld</font>
        `;
        console.log(ss);
    	
        //字符串插入变量和表达式。变量名写在${}中，${}中可以放入JavaScript表达式。
        const human = {
            name : "李四",
            age : 20
        }
        function fun(){
            return "好好学习，天天向上";
        }
        let info = `我叫${human.name},我今年${human.age},我们的口号是${fun()}`;
        console.log(info);
</script>

5、函数优化

函数参数的默认值

<script>
    //直接给参数写上默认值，每传就会自动使用默认值
    function add2(a,b=1){
        return a + b;
    }
    console.log(add2(20));

</script>

不定参数

//相当于Java的新特性可变个数形参
<script>
    function argument(...values){
            console.log(values.length);
        }
        argument(5);
        argument(1,2,3);
</script>

箭头函数

<script>
        //以前声明一个方法
        // var print = function(obj){
        //     console.log(obj);
        // }
        //现在声明一个方法
        var print = obj => console.log(obj);   
</script>

6、对象优化

ES6给Object扩展了许多新的方法，如:

​ -keys(obj): 获取对象的所有key形成的数组

​ -values(obj): 获取对象的所有value形参的数组

​ -entries(obj): 获取对象的所有ke和value形成的二维数组。格式:[k1,v1],[k2,v2]

​ -assign(dest,…src): 将多个src对象的值拷贝到dest中。(第一层为深拷贝，第二层为浅拷贝)

<script>
    const persion = {
        name: "jack",
        age: '20',
        language: ['java','c++','php']
    }
    console.log(Object.keys(persion));
    console.log(Object.values(persion));
    console.log(Object.entries(persion));
    var source = {
        boat: '轮船'
    };
    console.log(Object.assign(persion,source));
    console.log(persion);
</script>

声明对象的简写方式

<script>
	    const name = "张三";
        const age = 20;
        //以前写法
        const persion1 ={name: name,age: age};
        console.log(persion1);
        //现在写法
        //注意这种写法的前提必须保证变量名一致。
        const persion2 = {name,age};
        console.log(persion2); 
</script>

对象函数属性的简写

<script>
    const persion={
        name:'jack',
        //以前
        eat: function(food){
            return console.log(this.name+"在吃"+food);
        },
        //现在
        eat2(food){
            return console.log(this.name+"在吃"+food);
        }
    }
    persion.eat("苹果");   
    persion.eat2("草莓");  
</script>

对象扩展运算符

<script>
	        //拷贝对象(深拷贝)
        let p1 = {name:'jack',age:20};
        let p2 = {...p1};
        console.log(p2);

        //合并对象
        let p3 = {language: ['java','php']};
        let p4 = {...p1,...p3};
        console.log(p4);
</script>

7、数组新增的map和reduce方法

<script>
	    //map(): 接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
        let arr = ['1','20','7'];
        arr = arr.map(item => item*2);
        console.log(arr);

        //reduce(): 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。
               //[2, 40, -10, 6]
        //arr.reduce(callback,[initialValue])
        /**
         1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
         2、currentValue （数组中当前被处理的元素）
         3、index （当前元素在数组中的索引）
         4、array （调用 reduce 的数组）*/
        let result = arr.reduce((a,b)=>{
                console.log("上一次处理后："+a);
                console.log("当前正在处理："+b);
                return a + b;
            },100);
            console.log(result)    
</script>

8、Promise

在JavaScript的世界中，所有代码都是单线程执行的。由于这个"缺陷",导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的ajax请求a,b,c,d…后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度。

案例: 用户登录，并展示改用户的各科成绩。在页面发送两次请求

1. 查询用户，查询成功说明可以登录
2. 查询用户成功，查询科目
3. 根据科目的查询结果，获取成绩

分析:此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提供各科成绩的接口，为了渲染方便，最好响应json数据，在这里就不编写后台接口了，而是提供三个json文件，直接提供json数据，模拟后台即可:

corse_score_10.json得分

{
    "id": 100,
    "score": 90
}

user.json 用户

{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}

user_corse_1.json 课程

{
    "id": 10,
    "name": "chinese"
}

promise.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        // //1、查出当前用户信息
        // //2、按照当前用户的id查出他的课程
        // //3、按照当前课程id查出分数
        // $.ajax({
        //     url: "mock/user.json",
        //     success(data) {
        //         console.log("查询用户：", data);
        //         $.ajax({
        //             url: `mock/user_corse_${data.id}.json`,
        //             success(data) {
        //                 console.log("查询到课程：", data);
        //                 $.ajax({
        //                     url: `mock/corse_score_${data.id}.json`,
        //                     success(data) {
        //                         console.log("查询到分数：", data);
        //                     },
        //                     error(error) {
        //                         console.log("出现异常了：" + error);
        //                     }
        //                 });
        //             },
        //             error(error) {
        //                 console.log("出现异常了：" + error);
        //             }
        //         });
        //     },
        //     error(error) {
        //         console.log("出现异常了：" + error);
        //     }
        // });

        // //1、Promise可以封装异步操作
        // //resovle成功返回
        // //reject失败返回
        // let p = new Promise((resovle,reject) =>{
        //     //1.异步操作
        //     $.ajax({
        //         url: "mock/user.json",
        //         success: function(data){
        //             console.log("查询用户成功",data);
        //             resovle(data);
        //         },
        //         error:function(err){
        //             reject(error);
        //         }
        //     });
        // });
        //成功操作执行
        // p.then((obj)=>{
        //    return new Promise((resovle,reject)=>{
        //     $.ajax({
        //         url: `mock/user_corse_${obj.id}.json`,
        //         success: function(data){
        //             console.log("查询用户课程成功",data);
        //             resovle(data)
        //         },
        //         error:function(err){
        //            reject(err);
        //         }
        //     });
        //    })
        // }).then((data)=>{
        //     $.ajax({
        //         url: `mock/corse_score_${data.id}.json`,
        //         success: function(data){
        //             console.log("查询课程得分成功",data);
        //         },
        //         error:function(err){
                  
        //         }
        //     });
        // })

        //简化
        function get(url, data) { //自己定义一个方法整合一下
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        get("mock/user.json")
            .then((data) => {
                console.log("用户查询成功~~~:", data)
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功~~~:", data)
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("课程成绩查询成功~~~:", data)
            })
            .catch((err)=>{ //失败的话catch
                console.log("出现异常",err)
            });
    </script>
</body>
</html>

9、模块化

1、什么是模块化

模块化就是把代码进行拆分，方便重复利用。累成java中的导包: 要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。

模块功能主要由两个命令构成: export 和 import

• export 命令用于规定模块的对外接口
• import 命令用于导入其他模块提供的功能。

2、export

user.js

const util = {
    sum(a,b){
        return a + b;
   }
}
function add(a,b){
    return a + b;
}
export{name,age,add}

hello.js

//第一种方法
export const util = {
    sum(a,b){
        return a + b;
   }
}

//{}批量导入
//export 不仅可以到处对象，一切JS变量都可以导出。比如: 基本类型变量、函数、数组、对象
//第二种方法
//export{util}

//第三种
//导出的时候没有名字，导入的时候就可以随便起名
export default{
    sum(a,b){
        return a + b;
   }
}