ECMAScript6語法

• 爲何要學習ES6
  • ES6也叫ECMAScript2015，2015-6月正式發佈，向下兼容ES5.1
  • ES6來編寫Node.js程序
  • ES6讓JavaScript語言可以開發複雜應用程序

• 嚴格模式

  • ES5中出現的模式

  • 嚴格模式的目的：

  • 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
  • 消除代碼運行的一些不安全之處，保證代碼運行的安全；
  • 提升編譯器效率，增長運行速度；
  • 爲將來新版本的Javascript作好鋪墊

  • 參考

    嚴格模式的限制嚴格模式的限制

  • 開啓嚴格模式

    • 在做用域的最上面 "use strict"
      • js文件的最開頭
      • function的開頭

• 變量和常量

  • 變量 let

    • 沒有變量提高，必須先定義再使用
    • 有塊級做用域

    • 解決問題

      window.onload = function () {
                var ul = document.getElementById("list");
      
                var lis = ul.getElementsByTagName("li");
      
                for(let i = 0, length=lis.length; i < length; i++) {
      
      //                (function (i) {
      //                    lis[i].onclick = function () {
      //                        console.log(i);
      //                    }
      //                })(i);
      
                    lis[i].onclick = function () {
                        console.log(i);
                    }
                }
            }

  • 常量 const

    • 常量的一旦賦值，不能改變，好比：獲取包的時候，用const來定義變量
    • 有塊級做用域
    • 沒有變量提高，先定義再使用
    • 不能夠重複定義

    • 必須有初始值，不然報錯

    • 在Node.js中，全部接收require()得到的對象都使用const修飾

• string的擴展方法
  • includes() 返回布爾值，是否包含，第二個參數從第幾個位置開始查找
  • startsWith() 返回布爾值，是否以...開頭，第二個參數從第幾個位置開始查找
  • endsWith() 返回布爾值，是否以...結尾，第二個參數, 前n個字符以...結尾
  • repeat() 重複次數

• 模板

  • 示例1：

    let name = "steve jobs";
    let str = `hello ${name}`;

  • 示例2：

    let obj = {name:"jobs", age: 18, salary: 1};
    
    let template = `
      姓名：${obj.name}
    年齡：${obj.age}
    工資：${obj.salary}
    `.trim();

  • 示例3：生成頁面

• 箭頭函數

  • 格式： => (讀做：goesto) 左邊是參數，右邊是方法體
  • 演變：function f(x,y) {} -----> 演變成箭頭函數

    (x, y) => {}
     語法格式簡單

  • 箭頭函數的幾種形式：

    • 沒有參數 () => console.log("hello");
    • 有一個參數 a => ++a;

    • 有多個參數 (a,b) => a + b;

    • 方法體有多條語句 (a,b) => { a=1; b=2; console.log(a+b)};

  • 箭頭函數的注意事項
    • 箭頭函數不會影響this的指向
    • 箭頭函數根本沒有本身的this，箭頭函數內部的this就是外層代碼塊的this
    • 箭頭函數中沒有arguments對象，箭頭函數內部的arguments指向外層函數的arguments
    • 不能夠當作構造函數

• ES6的學習站點
  • 各個瀏覽器對ES6的支持 http://kangax.github.io/compat-table/es6/
  • 學習站點 http://es6.ruanyifeng.com/#README