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;

   Copy

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

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

   Copy

    

3. 箭頭函式運算式（arrow function expression）擁有比函式運算式還簡短的語法。它沒有自己的 this、arguments、super、new.target 等語法。本函式運算式適用於非方法的函式，但不能被用作建構式（constructor）。

   //一般用法
   document.getElementById("aLink1").addEventListener("click", function () {
     console.log(this);
   });
   //因為沒有 this，所以要用 e 來抓取目前元件資訊
   document.getElementById("aLink2").addEventListener("click", (e) => {
     console.log(e.target);
   });

   Copy

   設定常數才能用箭頭函式

   //原始寫法(加入參數預設值，避免錯誤)
   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)

   Copy

   另一個例子（將數字陣列轉為文字）

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

   Copy

    

4. ES module

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

   Copy

   接收的部份：

   //一定要有 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>

   Copy

    

5.