ES6新增语法

九个ES6新增语法的使用和演示

为了测试使用class定义类来便于调用测试，代码可以之间粘贴复制使用

1. Let声明关键字
2. Const声明关键字
3. 箭头函数
4. 默认参数
5. For…of…循环
6. 展开属性
7. Map集合
8. 静态方法
9. Getter和Setter方法

class Method {
    //构造方法
    constructor(){
        Method.a = 1;
    }

    //测试方法
    static test(){
        return this.a;
    }

    //let类似于var但是let具有作用域
    static let(){
        {
            var a = 1;
            let b = 2;
            console.log(a);//1
            console.log(b);//2
        }

        //使用try{}catch(){}为了测试结果能顺利演示
        try{
            console.log(a);//1
            console.log(b);//undefined
        }catch (e) {
            // throw new Error("作用域有问题");
        }
    }

    /**
     * const定义的变量无法更改这个值
     *      但是定义的数组、者对象、
     *      集合内部的值是可以更新的
     */
    static Const(){
        //初始化参数
        const a = 1;
        //数组
        const arr = ['Larry' , 'Marry'];
        //集合
        const map = new Map();
        //对象
        const obj = {name : 'Larry'};
        return{
            Let : function () {
                try{
                    console.log(a);
                    a = 2;//异常Assignment to constant variable.
                    console.log(a);//undefined
                }catch (e) {
                    //console.log(e);//打印异常
                }
            },
            Arr : function () {
                //数组

                console.log(arr);//[ 'Larry', 'Marry' ]
                arr.push("Jone");
                console.log(arr);//[ 'Larry', 'Marry', 'Jone' ]
            },
            List : function () {
                console.log(map);//Map {}
                map.set('name' , 'Larry');
                console.log(map);//Map { 'name' => 'Larry' }
            },
            Object : function () {
                console.log(obj);//{ name: 'Larry' }
                obj.name = 'Marry';
                console.log(obj);//{ name: 'Marry' }
            }
        }
    };

    /**
     * 箭头函数
     */
    static JTouF(){
        //老函数
        function foo_old() {
            console.log('老函数要有关键字function');
        }
        //新函数语法
        let foo_new = () => {
            console.log('新函数用()=>去替了老函数的语法');
        };
    };

    /**
     * 默认参数,
     */
    static DefPara(){
        //IIF：立即执行函数
        let foo = (a , b = 2) => {
            console.log(a + b);
        };
        //如果首个参数没有传入是不能运行的
        let foos = (a = 1 , b) => {
            console.log(a + b);
        };
        foo();//NaN
        foo(1);//3
        foo(2 , 2);//4

        foos(1);//NaN
        foos(1 , 1);//2
    };

    /**
     * for...of...循环
     * 遍历元素列表
     */
    static ForOf(){
        let data = ['Larry' , 'Marry' , 'Jone'];
        //for...in...
        for (let i in data) {
            console.log(data[i]);
        }
        //for...of...
        for (let item of data) {
            console.log(item);
        }
        //可用于字符串
        for (let item of 'JavaScript') {
            console.log(item);
        }
    };

    /**
     * 展开书属性
     * 帮助参数是数组的转换成参数列表
     * 是参数列表的转换成数组
     */
    static ZkPara(){
        let foo = (...arr) =>{
            console.log(arr);
        };
        foo(1,2,3);//[ 1, 2, 3 ]
        let arr = [1 , 2 , 3];
        let names = ['Larry' , 'Marry' , 'Jone'];
        foo(arr , names);//[ [ 1, 2, 3 ], [ 'Larry', 'Marry', 'Jone' ] ]
        foo(arr , ...names);//[ [ 1, 2, 3 ], 'Larry', 'Marry', 'Jone' ]
        foo(...arr , ...names);//[ 1, 2, 3 , 'Larry', 'Marry', 'Jone' ]
        //Math.max()是不接受数组的，可以用展开属性来传递数组
        console.log(Math.max(arr));//NaN
        console.log(Math.max(...arr));//3
    };

    /**
     * Map集合
     */
    static Collection(){
        return{
            mapColl : ()=>{
                let map = new Map();
                map.set('name' , 'Larry');//设置内容
                console.log(`Name : ${map.get('name')}`);//获取内容
                console.log(`集合大小为 ： ${map.size}`);//返回map的大小
                let keys = map.keys();//返回所有的键
                for (let item of keys)
                    console.log(`key : ${item}`);
                let values = map.values();//返回所有的值
                for (let item of values)
                    console.log(`value : ${item}`)
            },
            /**
             * Set集合
             * 用来保存任何类型唯一的值,
             * 重复的值不会保存的
             */
            setColl : ()=>{
                let set = new Set();
                set.add('a');
                set.add('b');
                set.add('c');
                set.add('a');//不被保存
                for (let item of set) {
                    console.log(item);
                }
                console.log(`set的大小为：${set.size}`);//set的大小
                console.log(`set里面包含a吗？${set.has('a')}`);
            },
        }
    };
    /**
     * 静态方法，使用class关键字来定义
     */
    static staticFoo(){
        class SF{
            //构造函数
            constructor(){
                SF.Name = 'Larry';
            }
            static Foo(){
                console.log(SF.Name);//在使用Name之前必须先new SF()
            }
        }
        new SF();
        SF.Foo();//调用SF.Foo()方法
    };

    /**
     * 类里面使用getter和setter方法
     */
    static GetAndSet(){
        //创建Test类
        class Test{
            //构造方法
            constructor(){
                this.name = 'Larry';
            }
            get Name(){
                return this.name;
            }
            set Name(name){
                this.name = name;
            }
        }

        let test = new Test();
        console.log(test.name);
        //设置name
        test.name = 'Marry';//隐式的使用了set Name
        console.log(test.name);//隐式的使用了get Name
    };
}
new Method();
Method.GetAndSet();

 

上述如有不足之处请指点，相互学习。