寒假學習——ES6（4）

寒假學習——ES6（4）

class

<script>
        class Paopao{
           constructor(name,age){
               this.name=name;
               this.age=age;
           }
           eat(){
               console.log("喫吧");
           }
        }
        let hong=new Paopao("lv",98);
        console.log(hong);
    </script>

• static標註的屬性和方法屬於類不屬於實例對象，要用類名調用

<script>
        class Phone{
            static name="手機";
            static change(){
                console.log("我可以改變世界");
            }
        }
        let huawei=new Phone();
        console.log(huawei.name);//undefined
        console.log(Phone.name);//手機
    </script>

• class的類繼承

 <script>
        class Phone{
            constructor(brand,price){
                this.brand=brand;
                this.price=price;
            }
            call(){
                console.log("用我打電話");
            }
        }
        class smartPhone extends Phone{
            constructor(brand,price,color){
                super(brand,price);//先將父類的構造函數初始化
                this.color=color;
            }
            photo(){
                console.log("拍照");
            }
        }
        const apple=new smartPhone("iphone",6100,"black");
        console.log(apple);
        apple.call();
    </script>

class的get set方法

//注意就是有一個隱含的不用聲明的成員屬性
<script>
        class Phone{
            get price(){
                console.log("價格屬性被讀取");
                return 'i love the new phone';
            }

            set price(value){
                console.log("價格屬性被修改");
            }
        }
        
    
        let p=new Phone();
        p.price;//直接執行裏面的語句
        console.log(p.price);//整個的結果是return的結果
        p.price='free';
        console.log(p);
    </script>

數值擴展

<script>
        //二進制0b開頭八進制0o開頭十六進制0x開頭
        let b=0b1010;
        let o=0o222;
        let x=0xfff;
        Number.EPSILON//表示最小精度如果2個數差值小於這個誤差那麼2個數可以看成相等
        Number.isFinite(100)//判斷100是否有限
        Number.isNaN(123)//判斷是否爲NaN
        Number.parseInt('123ll')//字符串轉化成整數和java的包裝器類似
        Number.isInteger//判斷是否是整數
        Number.trunc(3.5);//將小數抹掉
        Math.sign//判斷是正數還是負數還是0

    </script>

對象方法擴展

 <script>
        //1——Object.is判斷2個值是否完全相等
        console.log(Object.is(22,22));//true,和全等號類似，但是它NAN也是相等的，全等號不是
        //2——Object.assign()對象的合併,後面那個與前面那個重名的被覆蓋，不同的並起來
        const config1={
            host:'localhost8080',
            port:3306,
            name:'root',
            pass:'123',
            test:'test'
        };
        const config2={
            host:'http://123.com',
            port:33063,
            name:'123.com',
            pass:'123456',
            test2:'test2'
        }
        console.log(Object.assign(config1,config2));
        //3——Object.setPrototypeOf設置原型對象
        
    </script>

模塊化介紹

• 概念：將一個大的程序文件拆分成很多小的文件然後將小文件組合起來
• 模塊化的優勢
  • 防止命名衝突
  • 代碼複用
  • 高維護性
• 模塊功能：
  • 2個命令組成：export和import
    • export命令用於規定模塊對外的接口（在需要暴露的數據前面加上export即可）
    • import命令用於輸入其他模塊提供的功能

 <script type="module">
        import * as newm from "./newm.js";
        console.log(newm);
    </script>


//分別暴露
export let paopao='哈哈哈2048';
export function chui(){
    console.log("吹泡泡");
}

//統一暴露
export{paopao,chui};


//默認暴露
export default{
	paopao='哈哈哈2048';
	chui:function(){
		console.log("吹泡泡");
	}
}

• 引入模塊

//通用導入
import * as newm from "./newm.js";

//解構賦值形式
import {paopao,chui}  from "./newm.js";//as後面的是別名
import {default as m2} from "./m3.js"

//簡便形式，針對默認暴露
import m3 from "./m3.js"

• 瀏覽器使用es6模塊

//在index頁面寫入js文件的引入標籤,即利用src屬性引入一個入口文件
<script src="./test.js" type="module"></script>

//test.js中直接用import語句即可