Java登陆第三十三天——ES6(二)reset、spread、Class类语法糖

所谓ECMAScript6也就是JS6。这次更新带来了大量的新特性,使JS代码更简洁,更强大。

复习JS请走:JS入门

JS6文档请走:JS6菜鸟教程

reset

同Java中的可变参数

    public static void tell(String... info){
        System.out.println(info);
    }

在JS中,叫做reset

因为箭头函数中无法使用关键字arguments,所以出现reset

  1. reset支持普通函数和箭头函数

  2. 传参列表中只允许存在一个reset,并且必须在最后

<script>
        console.log("1.reset支持普通函数和箭头函数");
        function f1(a,b,c,...info) {
            console.log(a,b,c);
            console.log("f1;reset="+info);
        }
        f1(1,2,3,4,5);

        let f2=(a,b,...info)=>{
            console.log(a,b);
            console.log("f2;reset="+info);
        }
        f2(1,2,3,4,5);
        /*
        1 2 3
        f1;reset=4,5
        1 2
        f2;reset=3,4,5
        */

        console.log("2.传参列表中只允许存在一个reset,并且必须在最后");
        function f3(...info,...info2) {}//报错 Rest parameter must be last formal
        function f4(...info,a) {}//报错同上
</script>

spread
可变参数的实际应用;spread也可以说是reset应用于实参之上。

  1. spread应用于传参是数组的方法

  2. spread利用解构表达式快速合并数组

  3. spread利用解构表达式快速合并对象

<script>
        console.log("1.JS中的reset同Java中可变参数");
        let strArr = ["A", "B"];
        let f = (...arr) => {
            console.log(arr);
        }
        f(...strArr);//['A', 'B']

        console.log("2.spread利用解构表达式快速合并数组");
        let Arr1=[1,2];
        let Arr2=[3,4];
        let Arr3=[Arr1,Arr2];//注意这是解构表达式的用法 打印结果[Array(2), Array(2)]
        console.log(Arr3);
        let Arr4=[...Arr1,...Arr2];//这是spread应用于解构表达式 打印结果[1, 2, 3, 4]
        console.log(Arr4);

        console.log("3.spread利用解构表达式快速合并对象");
        let p1={name:"张三"};
        let p2={age:18};
        let p3={p1,p2};
        console.log(p3);//注意这是解构表达式的用法 打印结果{p1: {…}, p2: {…}}
        let p4={...p1,...p2};
        console.log(p4);//这是spread应用于解构表达式 打印结果{name: '张三', age: 18}
</script>

Class类语法糖

一种语法糖,让JS对象更符合面向对象编程的写法

(了解即可,这个语法糖真的不好吃。很想让人吐槽)

新增class(类)、extends(继承)、constructor(构造器)、super等关键字

  1. 类中属性的定义

  2. 类中getter、setter方法、普通方法、静态方法

  3. 类的构造器:(只允许有一个构造器)

  4. 类的继承

<script>
        console.log("1.类中属性的定义");
        console.log("2.类中getter、setter方法、普通方法、静态方法");
        class Person {
            name;//成员属性 name
            #age;//私有的成员属性 后续书写必须把#也当作该属性的名字 #age必须一起出现

            get name(){//getter
                return this.name;
            }
            set name(name){//setter
                this.name=name;
            }
            get age(){
                return this.#age;//把#也当作它的属性名
            }
            set age(age){
                this.#age=age;
            }
            say(){//普通方法say
                //模板字符串
                console.log(`"${this.name}今年${this.#age}岁了"`)
            }
            static add(x,y){//静态方法add
                return x+y;
            }

        }
        let p1=new Person();
        p1.name="嘎子";//这里是调用setter方法
        p1.name;//这里是调用getter方法 打印结果 嘎子
        p1.age="8";
        p1.say();//"嘎子今年8岁了"
        console.log(Person.add(1, 2));//静态方法可以用类名访问 打印结果3

        console.log("3.类的构造器");
        class Door{
            #sell;
            get sell(){
                return this.#sell;
            }
            set sell(sell){
                this.#sell=sell;
            }
            constructor() {//无参构造 初始化为999
                this.#sell=999;
            }
            //报错 A class may only have one constructor
            constructor(sell) {//有参构造器 一个类中只允许拥有一个构造器
                this.sell=sell;//错误的写法!!! JS会自动创建一个sell的属性
                this.#sell=sell;
            }
        }
        let d1=new Door();
        console.log(d1.sell);//999

        console.log("4.类的继承");
        class A{
            mom
            constructor() {
                console.log("父类的构造器");
            this.mom="26个字母"
            }
        }
        class B extends A{
            //不显示定义构造器 测试初始化子类时 父类的构造器是否会调用
        }
        let b1=new B();//父类的构造器

</script>
posted @ 2024-03-09 17:38  rowbed  阅读(7)  评论(0编辑  收藏  举报