:::
1. ES6 重點
- 變數宣告:
var是宣告全域變數;let是宣告只存活在{}中的變數;const是是宣告常數(無法再修改,但是[array]陣列及{object}物件可以塞值進去)
- 解構賦值 (Destructuring assignment) 語法是一種 JavaScript 運算式,可以把陣列或物件中的資料解開擷取成為獨立變數。
const user = { name: "Tad", age: 48, address: "Tainan", }; //解構(可以只抽出某幾個) const { name, age, address } = user;亦可直接將整個物件塞入:
const user_data = { user, sex: "男", }; - 箭頭函式運算式(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); });設定常數才能用箭頭函式
//原始寫法(加入參數預設值,避免錯誤) 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])); - 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>
