前端ES6入门笔记-01

一：let相关特性
    1:var申明的变量往往会越域，let申明的变量有严格的局部作用域
        {//这个大括号是一个代码块作用域
            var a = 1;
            let b = 2;
        }
        console.log(a);
        console.log(b);//这个b会出现:Uncaught ReferenceError: b is not defined
    2:var可以申明多次，let只能申明一次  
        var m = 1;
        var m = 2;
        let n = 3;
        let n = 4; //let申明多次就会出现下面的问题
        console.log(m);
        console.log(n);//这个会出现:SyntaxError: Identifier 'n' has already been declared
    3:var会出现变量提升，let不会,let必须提前定义变量 
        console.log(x);
        var x = 10;
        console.log(y);// ReferenceError: Cannot access 'y' before initialization
        let y = 20; 

二：const申明常量(只读变量),const申明之后不允许改变,一旦申明必须初始化,否则会报错
        const a = 1;
        a = 4; //TypeError: Assignment to constant variable.   
            

三：解构表达式
    1：数组解构
        1):一般正常的操作如下，能够正常打印出来
            let arr = [1,2,3];
            let a = arr[0];
            let b = arr[1];
            let c = arr[2];
            console.log(a,b,c)
        2):使用es6中的解构表达式语法,直接一次性赋值
            let arr = [1,2,3];
            let [a,b,c] = arr;
            console.log(a,b,c)
                
    2：对象解构
        1):一般的操作如下
            const person = {
                name:"jack",
                age:21,
                language:['ajava','js','css']
            };
            const name = person.name;
            const age = person.age;
            const language = person.language;
            console.log(name,age,language);
        2):    使用es6中的解构表达式语法,直接一次性赋值
            const person = {
                name:"jack",
                age:21,
                language:['ajava','js','css']
            };
            const {name,age,language} = person;
            console.log(name,age,language);
            注意：如果我们想将对象中的名称换掉，可以使用下面的做法
            const person = {
                name:"jack",
                age:21,
                language:['ajava','js','css']
            };
            const {name:name2,age,language} = person;//使用冒号加上新的变量名
            console.log(name2,age,language);
        
四：字符串扩展的新API
    let str = "hello.vue";
    console.log(str.startsWith("hello"));//返回true
    console.log(str.endsWith(".vue"));//返回true
    console.log(str.includes("e"));//返回true
    console.log(str.includes("hello"));//返回true        
        
五：字符串模板(直接使用反单引号，不需要使用字符串拼接了)
    let ss = `

 
                      hello world
           

`;
        console.log(ss);            
        
六：字符串插入变量和表达式。变量名写在${}中,${}中可以放入Javascript表达式
    1):常规插入
        let a = "zhangsan";
        let age = 21;
        let info = `我是${a},今年${age}了`;
        console.log(info);    //可以成功打印出来    
    2):可以运算    
        let a = "zhangsan";
        let age = 21;
        let info = `我是${a},今年${age + 10}了`;
        console.log(info);    //可以成功打印出来
        
    3):可以调用方法
        let a = "zhangsan";
        let age = 21;
        function fun(){
            return "这是一个函数";
        }
        let info = `我是${a},今年${age}了,我想说:${fun()}`;
        console.log(info);
        
        
七:函数优化
    1：为函数方法添加默认值,下面表示如果调用时没有传递b参数,那么b默认是1
        function fun(a,b=1){
            return a+b;
        }
        console.log(fun(20));//结果打印21
    2：不定参数
        function fun(...values){//表示参数可以接受n个
            console.log(values.length);//打印总共传递参数的个数
        }
        fun(1,2,3,4,5,6)
    3：箭头函数
        1):一个参数的箭头函数
            var print1 = function(obj){//这是传统的方式
                console.log("传统的方式:"+obj);
            }
            var print2 = obj => console.log("箭头函数："+obj);
            print1("hello1");//调用print1
            print2("hello2");//调用print2
        2):2个参数的箭头函数
             var print1 = function(a,b){//这是传统的方式
                return a+b;
             }
            var print2 = (a,b) => a+b;//这是箭头函数的方式
            console.log(print1(1,2));
            console.log(print2(2,3));
        3):多个参数的箭头函数    
            var print1 = function(a,b){//这是传统的方式
                return a+b;
            }
            var print2 = (a,b) => {//可以在方法体中做计算
                e = a-b;
                return e;
            }
            console.log(print1(1,2));
            console.log(print2(2,3));
    4：箭头函数加上解构表达式        
        var person = {
            name:"jack",
            age:21
        };
        var print = ({name})=>console.log("hello:"+name);
        print(person);//打印的结果是hello:jack
        
八：ES6新增常用的API
    1：获取对象里面key和value的方式
        var person = {
            name:"jack",
            age:21,
            language:['java','js','css']
        };
        console.log(Object.keys(person));//["name", "age", "language"]
        console.log(Object.values(person));//["jack", 21,["java", "js", "css"]]
        console.log(Object.entries(person));//[["name", "jack"],["age", 21],["language", ["java", "js", "css"]]]
    2：使用assign函数将数据复制给目标
        const target = {a:1};
        const target2 = {d:1};
        const source1 = {b:2};
        const source2 = {c:3};
        Object.assign(target,source1,source2);//将source1，source2复制到target中    
        Object.assign(target2,source1);//将source1复制到target2中    
        console.log('target',target);//结果：{a: 1, b: 2, c: 3}
        console.log('target2',target2);//结果：{d: 1, b: 2}
        
    3：什么对象的简写
        const name = "zhangsan";
        const age = 21;
        var person = {//传统方式
             name:name,
             age:age  
        };
        //如果变量名称和值一样，可以直接如下
        var person1 = {name,age};
        console.log(person1);//结果：{name: "zhangsan", age: 21}
    4：对象的函数属性的简写
        let person = {
            name:'jack',
            eat:function(food){
                console.log(this.name+"在吃"+food);
            },
            //下面的箭头函数,不能使用this,必须使用对象.属性
            eat2:food => console.log(person.name+"在吃"+food),//箭头函数
            eat3(food){//简化函数写法
                console.log(this.name+"在吃"+food);
            }
        }
        //直接调用
        person.eat("香蕉");//结果：jack在吃香蕉
        person.eat2("香蕉2");//结果：jack在吃香蕉2
        person.eat3("香蕉3");//结果：jack在吃香蕉3

九：对象扩展运算符
    1：对象深拷贝
        let person = {
             name:"lisi",
             age:21  
        };
        let someone = {...person};//ES6的深拷贝,将person拷贝给someone
        console.log(someone);//结果：{name: "lisi", age: 21}

    2：合并对象
        let person1 = {
            name:"lisi",
            age:21  
        };
        let person2 = {
             addree:"上海",
             sex:"男"  
        };
        let someone = {...person1,...person2};//ES6的合并对象,将person1,person2中的属性都给拷贝给someone
        console.log(someone);//结果：{name: "lisi", age: 21, addree: "上海", sex: "男"}

十：数组中新增的map和reduce函数
    1：map函数(接受一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回)、
        //将数组中的所有元素都乘以2    
        var arr = ['1','2','3','4'];
        arr = arr.map(item=>item*2);    
        console.log('arr',arr);//打印结果：[2, 4, 6, 8]    
        
    2：reduce函数(为数组中的每一个元素一次执行回调函数，不包括数组中被删除或从未被赋值的元素)
        1):语法
            reduce(callback回调函数,initValue)
            注意：
                callback回调函数中包含4个参数：
                    a：priviousValue(上一次调用返回的值，或者是提供的初始值initValue)
                    b：curruentValue(数组中当前被处理的元素)
                    c：index(当前元素的索引)
                    d：array(调用reduce的数组)
        2):案例，求和
            //将数组中的所有元素都乘以2    
            var arr = [1,2,3,4];
            let sum = arr.reduce((a,b)=>{
                //这里我们只使用了前两个参数,就是
                //1:上一次调用返回的值，或者是提供的初始值initValue
                //2:curruentValue(数组中当前被处理的元素)
                //这里我们给了初始值,从100开始
                return a+b;
            },100);
            console.log('sum',sum);//打印结果110
            
十一：ES6之promise异步编排
    1：需求：
        //1、查出当前用户信息
        //2、按照当前用户的id查出他的课程
        //3、按照当前课程id查出分数
        目前有3个测试的json文件：
        1):user.json
            {
                "id":1,
                "name":"jack",
                "password":"123456"
            }
        2):    user_course_1.json
            {
                "id":10,
                "name":"chinese"
            }
        3):    corse_score_10.json
            {
                "id":100,
                "score":90
            }
    2：按照原本Jquery使用ajax请求的逻辑，中间要嵌套多层ajax请求
         $.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);
            }
        });
    3：使用promise封装异步操作1(最简单的操作)
           //使用promise来封装异步操作,首先创建一个Promise函数
         let p = new Promise((resolve,reject)=>{
               //resolve：这个是操作成功以后用来解析数据的
               //reject：这个是操作失败了以后用来拒绝数据的
               $.ajax({
                 url: "mock/user.json", 
                 success:function(data){
                     //查询用户信息
                     resolve(data);//这个就是成功后我们将data数据再传递给promise对象
                 },
                 error:function(err){
                     reject(err);//这个就是失败后我们将错误数据再传递给promise对象
                 }
               });  
         });
         //下面我们再通过promise对象回调成功后失败后的操作
         p.then((obj)=>{//这个是之前promise成功后会调的方法,obj接收上面resolve传递的数据
              return new Promise((resolve,reject)=>{
                   //再次发送请求，查询课程
                    $.ajax({
                        url: `mock/user_course_${obj.id}.json`, 
                        success:function(data){
                            //查询课程信息
                            resolve(data);
                        },
                        error:function(err){
                            reject(err);
                        }
                    });      
               })
         }).then((data) => {//如果上面请求完之后，还需要发请求我们就可以一直用then方法,并且返回Promise对象
            console.log("上一步的结果", data)
            $.ajax({
                url: `mock/corse_score_${data.id}.json`,
                success: function (data) {
                    console.log("查询课程得分成功:", data)
                },
                error: function (err) {
                }
            });
         })   
        //  }).catch((err)=>{//这个是之前promise失败后会调的方法,err接收上面reject传递的数据

        //  })
    4：封装Promise操作
        //直接将Promise提取出来称为一个公共的方法，只需要传递url和参数即可
        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)=>{
                console.log("出现异常",err)
            });
        

十二：ES6的模块化
    1：什么是模块化？
        模块化就是把代码拆分，方便重复利用，类似于java中的导包。要使用一个包，必须先导包，而js没有包的概念，而是“模块”
    2：模块功能主要是有两个命令构成`export`和`import`
        a：export命令用于规定模块的对外接口,`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
        b: import用于导入其他模块提供的功能
    3：    实例
        1):定义一个hello.js，内容如下
            // export const util = {//这个是定好了导出的方法名称util，那么在其他js文件中使用import引入时候名称必须是util
            //     sum(a, b) {
            //         return a + b;
            //     }
            // }

            export default {////这个是没有定义导出的方法名称，那么在其他js文件中使用import引入时候名称可以自定义
                sum(a, b) {
                    return a + b;
                }
            }
            // export {util}

            //`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
        2):定义一个main.js引入hello.js暴露的方法
            import abc from "./hello.js"//hello.js中的export default时，我们随意起名称
            import {name,add} from "./user.js"//可以引入其它js中多个方法
            abc.sum(1,2);//调用对象中的方法
            console.log(name);
            add(1,3);