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>
-