ES6课程学习笔记-day01

1、环境搭建
    nodejs
    下载地址：http://nodejs.cn/download/

2、ES6介绍
    1) ES5的版本升级
    2) 提供了简介的语法和新的特性
        迭代器
        Map、Set
        Promise
        箭头函数
        异步函数
        ...
    3) ES6在浏览器上的兼容性比ES5差一点，但是在nodejs环境下完全兼容
        有些代码在浏览器上没有效果，比如模块化

        在js中做ajax、dom时，必须将代码运行在浏览器上
        如何将ES6运行在浏览器，使它兼容？

        模块化
            1、dom驱动
                看点资讯（html片段）
                    category.html
                    article.html
                    comment.html

                在这一阶段，dom为真实的dom，先有dom再有js
                category.html
                    <div>
                    
                    </div>

            2、数据驱动
                在ES6中，dom为虚拟的dom(通过js来生成dom)，现有js再有dom
                    category.js
                    article.js
                    comment.js
    
3、基础语法
    学习书籍推荐：https://es6.ruanyifeng.com/

    1) let命令
        ES6新增了let命令，用来声明变量，用法类似于var
        var a = 1;
        let b = 2;

        {
            var a =1;
        }
        console.log(a);

        {
            let b = 2; // b变量只能在{}内使用
        }
        console.log(b);

        JS中只有函数作用域和全局作用域，没有块级作用域，{}限定不了var声明变量的范围
        通过let声明的变量，只能在块级作用域中使用，类似于局部变量

        问题：内层变量会覆盖外层变量(原意是，if判断外部使用外层的date，if判断内部使用内层date)
            var date = new Date();
            function getDate(){
                console.log(date);
                if(false){
                    var date = 2020/05/18;
                    console.log(date);
                }
            }
            getDate(); // undefined
        
            ==>
            
            var date = new Date();
            function getDate(){
                console.log(date);
                if(false){
                    let date = 2020/05/18;
                    console.log(date);
                }
            }
            getDate(); // 当前时间

        特点：
            1. 存在块级作用域
            2. 不允许变量的重复声明
                var a = 1;
                var a = 2;
                console.log(a); // 2

                let b = 1;
                let b = 2;
                console.log(b); // 'b' has already been declared
            3. 不允许变量的提升
                console.log(a); // undefined
                var a = 1;

                console.log(b); // b is not defined
                let b = 2;
                使用关键字let声明出来的变量，不可以在声明之前被使用，否则会报错
            4. 存在暂时性死区
                var temp = 123;
                if(true){
                    temp = 'abc';
                    let temp;
                }
                在判断体中，使用了let声明了一个temp局部变量，在这个变量声明之前，都不可以操作该变量
                这个现象叫"暂时性死区"

    2) const命令
        声明一个只读的常量。一旦声明，常量的值就不能改变。
        const a = 1;
        console.log(a); // 1

        const a = 1;
        a++;
        console.log(a); // 报错

        在引入第三方库的时候，一般会使用const

        特点：
            1. 存在块级作用域
            2. 不允许变量的重复声明
            3. 存在暂时性死区
            4. 变量的声明和初始化要同时进行
                const a = 1;
                console.log(a); // 1

                const b;
                b = 2;
                console.log(b); // 报错

        总结：
            声明方式        变量提升        暂时性死区     重复声明        块级作用域
              var            允许            不存在         允许           不存在
              let           不允许            存在         不允许           存在
             const          不允许            存在         不允许           存在

    3) 解构(模式匹配)
        ES6中，允许按照一定的模式，从数组或对象中提取值，并且对其进行一些操作，比如赋值

        1. 数组的解构
            ES6之前，赋值
                var name = 'xpf';
                var age = 25;
                var gender = 'male';
                console.log(name,age,gender);

            ES6中，赋值
                let [name,age,gender] = ['xpf',25,'male'];
                console.log(name,age,gender); // xpf 25 male

            只要等号两边的模式相同，左边的变量就会被赋予等号右边对应位置上的值
                let [age,name,gender] = ['xpf',25,'male'];
                console.log(name,age,gender); // 25 xpf male
            
            案例
                等号的左边模式个数等于于右边的
                    let [,,gender] = ['xpf',25,'male'];
                    console.log(gender); // male

                    let [a,b,c] = [1,2,[3,4]];
                    console.log(a,b,c); // 1 2 [3,4]

                等号的左边模式个数大于右边的
                    let [name] = [];
                    console.log(name); // undefined

                等号的左边模式个数小于右边的
                    let [gender] = ['xpf',25,'male'];
                    console.log(gender); // xpf

                等号两边的模式不相同
                    let [gender] = 'xpf';
                    console.log(gender); // x

                    let [gender] = true;
                    console.log(gender); // 报错，true不可迭代

                    可遍历
                        Array、String、Map、Set、函数的arguments对象
                    不可遍历
                        true/false、NaN、undefined、null、{}
                
        2. 数组解构默认值
            解构的时候，允许指定默认值
            
            let [name='xpf'] = [];
            console.log(name); // xpf

            let [name='xpf'] = ['张三'];
            console.log(name); // 张三

            1、只有当数组对应位置上的值为undefined时，默认值才会生效
            let [name='xpf'] = [null];
            console.log(name); // null

            let [name='xpf'] = [undefined];
            console.log(name); // xpf

            2、默认值可以引用解构赋值的其他变量，但是这个变量必须已经声明过，否则会报错
            let [name,age,gender=name] = ['xpf',25];
            console.log(name,age,gender); // xpf 25 xpf

            let [name='xpf',name2=name] = [];
            console.log(name,name2); // xpf xpf

            let [name=name2,name2='xpf'] = [];
            console.log(name,name2); // 报错，name2未定义，无法在初始化之前访问到name2

        3. 对象的解构
            var obj = {
                name:'xpf',
                age:25,
                gender:'male'
            }
            /*var name = obj.name;
            var age = obj.age;
            var gender = obj.gender;
            */

            let {name,age,gender} = obj;
            console.log(name,age,gender); // xpf 25 male

            对象的解构与数组的解构不同点：
               1、数组的元素是按顺序排列的，变量的取值由它的位置决定(根据索引一一对应取值)
                 对象的属性没有次序，变量必须与属性名同名，才能取到正确的值，跟变量的位置没有关系

                等号左边变量的次序，与等号右边同名属性的次序不一样，对取值没有影响
                let {age,name,gender} = obj;
                console.log(name,age,gender); // xpf 25 male

                变量与属性名不同名(解构失败，变量的值为undefined)
                let {name,age,address} = obj;
                console.log(name,age,address); // xpf 25 undefined
               2、对象解构的内部机制
                let {name,age,gender:address} = obj;
                console.log(name,age,address); // xpf 25 male
                ==>等价于
                let {name:name,age:age,gender:address} = obj;
                console.log(name,age,address); // xpf 25 male
                
                let {name:name,age:age,gender:address} = obj;
                console.log(name,age,gender); // 报错，gender is not defined

        4. 对象解构默认值
            var obj = {
                name:'xpf',
                age:25,
                gender:undefined
            }
            let {name,age,gender='male'} = obj;
            console.log(name,age,gender); // xpf 25 male

            ===> 等价于
            var obj = {
                name:'xpf',
                age:25
            }
            let {name,age,gender='male'} = obj;
            console.log(name,age,gender); // xpf 25 male

            只有当对象的属性值为undefined的时候，默认值才生效

            var obj = {
                name:'xpf',
                age:25,
                gender:'female'
            }
            let {name,age,gender='male'} = obj;
            console.log(name,age,gender); // xpf 25 female

        5. 解构的用途
            1、交换两个变量的值
                let a = 1;
                let b = 2;
                let temp;

                temp = a;
                a = b;
                b = temp;
                console.log(a,b); // 2 1

                ===> 等价于
                let a = 1;
                let b = 2;
                [a,b] = [b,a];
                console.log(a,b); // 2 1
            
            2、让函数返回多个值
                function math(a,b){
                    var sub = a-b;
                    var add = a+b;
                    return {sub,add}
                }

                let res = math(1,2);
                console.log(res); 
                console.log(res.sub); // -1
                console.log(res.add); // 3
                此时取值不方便

                说明：如果希望函数同时返回多个参数，我们可以将这几个参数放在一个数组或者对象中返回

                function math(a,b){
                    var sub = a-b;
                    var add = a+b;
                    return [add,sub]
                }

                let [add,sub] = math(1,2);
                console.log(add,sub); // 3 -1

            3、在对象中快速取值
                var obj = {
                    name:'xpf',
                    age:25,
                    gender:'male'
                }
                /*var name = obj.name;
                var age = obj.age;
                var gender = obj.gender;
                */

                let {name,age,gender} = obj;
                console.log(name,age,gender); // xpf 25 male

                ~~~~

                let obj = {
                    name:'xpf',
                    age:25,
                    gender:'male',
                    address:{
                        province:'安徽省',
                        city:'合肥市'
                    }
                }

                //var city = obj.address.city;
                let {name,address:{city}} = obj;
                console.log(name,city); // xpf 合肥市

            4、函数参数的定义
                ES6之前，不能直接为函数的参数设定默认值

                function ajax({url,method='get',data,success}){
                    console.log(url);
                    console.log(method);
                    console.log(data);
                    console.log(success);
                }

                ajax({
                    url:'www.baidu.com',
                    success:function(){

                    },
                    data:{
                        name:'xpf'
                    }
                })

                使用es6的解构传参，此时method有了一个默认值，为get
                1、不传递method的时候，为默认的get，传递了method的时候，为传递的值
                2、传递参数的时候，参数的顺序可以随便写

            5、遍历Map集合
                

---
linux上下载指定版本的的nodejs
https://blog.csdn.net/qq_42393859/article/details/89914356?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase