:::

1. ES6 重點

  1. 變數宣告:
    1. var 是宣告全域變數;
    2. let 是宣告只存活在 {} 中的變數;
    3. const 是是宣告常數(無法再修改,但是 [array]陣列及 {object} 物件可以塞值進去)
  2. 解構賦值 (Destructuring assignment) 語法是一種 JavaScript 運算式,可以把陣列或物件中的資料解開擷取成為獨立變數。
    const user = {
      name: "Tad",
      age: 48,
      address: "Tainan",
    };
    //解構(可以只抽出某幾個)
    const { name, age, address } = user;
    

    亦可直接將整個物件塞入:

    const user_data = {
      user,
      sex: "男",
    };
    

     

  3. 箭頭函式運算式(arrow function expression)擁有比函式運算式還簡短的語法。它沒有自己的 thisargumentssupernew.target 等語法。本函式運算式適用於非方法的函式,但不能被用作建構式(constructor)。
    //一般用法
    document.getElementById("aLink1").addEventListener("click", function () {
      console.log(this);
    });
    //因為沒有 this,所以要用 e 來抓取目前元件資訊
    document.getElementById("aLink2").addEventListener("click", (e) => {
      console.log(e.target);
    });

    設定常數才能用箭頭函式

    //原始寫法(加入參數預設值,避免錯誤)
    const Add = function(a=0, b=0) {
      return a + b
    }
    //箭頭函式
    const Add = (a=0, b=0) => {
      return a + b
    }
    //若只有返回可以更簡化
    const Add = (a=0, b=0) => a + b
    //呼叫函式用法
    add(1, 3)

    另一個例子(將數字陣列轉為文字)

    const ArrtoStr = (arr = []) => {
        const mapStr = arr.map((item) => item + '')
        return mapStr
    }
    
    console.log(ArrtoStr([1, 3]));

     

  4. ES module
    //tools.js
    const Add = (a, b) => {
      return a + b;
    };
    
    //一定要用 const 才能 export
    export Name = "Mike";
    export const Age = 12;
    //預設被匯出的
    export default Add;
    

    接收的部份:

    //一定要有 type="module"
    <script type="module">
      //預設匯出的不需 {},Add名稱可以任意改
      import Add, { Name, Age } from "./tools.js";
      console.log(Add(4, 2));
      console.log(Name);
      console.log(Age);
    </script>

     

  5.  

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1724

計數器

今天: 570570570
昨天: 3591359135913591
總計: 7489518748951874895187489518748951874895187489518