Java登陸第三十三天——ES6(二)reset、spread、Class類語法糖

rowbed發表於2024-03-09

所謂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>

相關文章