10.1 ES6 的新增特性以及簡單語法

ES6 的新增特性以及簡單語法 

• let 和 const
• 模板字符串
• 箭頭函數
• 對象單體模式
• es6面向對象
• 模塊化

 let 和 const

　　以前一直用 var 來聲明變量，ES6 新增 let 和 const

script type="text/javascript">

    // let聲明變量塊級做用域,不能重複聲明
    // let聲明的變量 是塊級做用域,不能重複聲明
    // {
    //     // let a = 12;
    //     let a  = 12;
    //     let a  = 13;
    // }
   
    // console.log(a);
    
　　 // var 的坑 ，循環的時候會按照最後一次的賦值
    // var a = [];
    // for (var i = 0; i < 10; i++) {    //這裏的 var i 換成 let i 便可解決
    //  a[i] = function () {
    //     console.log(i);
    // };
    // }
    // a[6](); // var 10 ，let 6
    
    // var 會發生變量提高
    console.log(foo); // 輸出undefined
    var foo = 2;
    // let  不發生變量提高 
    console.log(foo); // 報錯 ReferenceError
    let foo = 2;

    // const 聲明常量，一旦聲明，當即初始化，不能重複聲明。
    const foo; // 沒當即賦值，會報錯
    // const 聲明是隻讀常量，不可更改
    const P = 1
    P = 2 // 報錯沒法更改
</script>

 

模板字符串

　　更加的簡單的拼接字符串 用 ${} 來填入

<script>
    var a = 1;
    var b = 2;

    // var str = "哈哈哈哈" + a + "嘿嘿嘿" + b;
    // ` xxx${}xxxx${}xxx`  注意反引號 
    var str = `哈哈哈哈${a}嘿嘿嘿${b}`;     
    console.log(str);
</script>

 

 箭頭函數

　　操做更加簡單了，可是改變了特性形成了不便

<script>
    // function(){} --等同於--- ()=>{}

    // 1.this的指向發生改變，指向了定義對象時的對象
            // function(){} 的時候至關於 self 
            // ()=>{} 的時候至關於 windows對象
    // 2.arguments不能使用，沒法再經過 arguments 拿全部的參數
　　　　var person = {
        name:'張三',
        age: 18,
       
        fav：()=>{ 
　　　　　　　　　　　　console.log(this); 　　　　// windows
　　　　　　　　　　　　console.log(arguments);  // 報錯不存在 
　　　　　　　　　　　　} 
　　　　　　　　　　} 
　　　　　　　　　　person.fav();
</script>

 

 對象單體模式

　　爲了解決箭頭函數的問題

　　(){} 徹底等同於 function(){} 再也不有上面的困擾了

<script>
    var person = {
        name:'張三',
        age: 18,
       
        fav(){
            console.log(this);
            console.log(arguments);
        }
    }
    person.fav();
</script>

 

 ES6的面向對象

 

<script>
    // 構造函數的方式建立對象
    //  function Animal(name,age){
    //      this.name = name;
    //      this.age = age;
        
    //  }
    //  Animal.prototype.showName = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName2 = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName3 = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName4 = function(){
    //      console.log(this.name);
    //  }
    //  var dog = new Animal('日天',18)



    class Animal{
        constructor(name,age){ //  必需要 constructor 初始化屬性 相似於 init 
            this.name = name;
            this.age = age;
        }  // 這一行必定不要加逗號
        showName(){
            console.log(this.name)
        }
    }
    var d = new Animal('張三',19);
    d.showName();
</script>