ES 6 新特性筆記
阿新 • • 發佈：2021-07-05
記一點關於 ES6 的新特性~
let
- 與 var 的區別
| 功能 | let | var |
|---|---|---|
| 塊級作用域 | ✔️ | ❌ |
| 變數提升 | ❌ | ✔️ |
| 重複宣告（相同作用域內） | ❌ | ✔️ |
- var 沒有塊級作用域的解決方法
使用函式替代塊級作用域，以保證變數的正常使用，如：
... <button>btn1</button> <button>btn2</button> <button>btn3</button> <button>btn4</button> <button>btn5</button> <script> var btns = document.getElementsByTagName('button'); for (var i=0, i<btns.length, i++) { (function(i){ btns[i].addEventListener('click', function(){ console.log(i) }) })(i) } </script> ...
const
具有一下特徵：
-
宣告變數只讀
-
若宣告的為複合型別的資料（物件、陣列等），變數指向記憶體地址，即變數中的內容可變
-
只在宣告的塊級作用域有效
-
不具有變數提升（需在聲明後才可以使用）
-
不可重複宣告
箭頭函式
- 定義形式
// 如果沒有引數或多個引數，使用 () let f1 = () => 1 let f2 = (a, b) => a * b // 如果只有一個引數，可以不用 () let f3 = x => x * 2 // 如果函式體只有一條語句，可以不用 {} let f4 = x => x * x // 簡寫單條語句時遇到物件，需要加 () let f5 = x => ({name: x, age: 18})
- 與普通函式的區別
-
箭頭函式沒有構造方法，不可使用
new關鍵字生成function f1 () { } const f2 = () => {} // ok f = new f1(); // error f2 = new f2() -
this關鍵字的指向/* * 在普通函式中，this 指向呼叫者 * 如果無呼叫者，則指向 window * * 在箭頭函式中，this 指向其定義所在的上層作用域的 this 指標 */ const box = document.getElementById('#box'); // 對於普通函式，如需在此處訪問 box 物件 // 需要將 this 先賦值給變數方可在 setTimeout 中呼叫 // 否則 setTimeout 中呼叫的 this 為 window 物件 box.onclick = function () { const obj = this; setTimeout(function () { obj.className = 'bg-blue' }, 3000) } // 箭頭函式中的 this 指向其定義所在的上層作用域 // 這裡函式中的 this 即 box 物件 box.onclick = function () { setTimeout(() => { this.className = 'bg-blue' }, 3000) }
Array.map/filter/reduce
- map 將函式應用於資料的每一個元素，並將返回值作為新的陣列元素返回
- filter 將函式應用於資料的每一個元素，並將返回 true 的元素組成新陣列返回
- reduce 累積引用
Set
集合
Map
類似於 python 中的 dict
String.startsWith/endsWith
判斷字串的起始值與結尾的值
模板字串
使用 ` ，支援換行和變數的傳遞：
let name = 'kingron';
let tempStr = `my name is ${name}`
解構賦值
// 陣列使用陣列來接受，長度可以不一樣
// 按順序賦值 x: 1, y: 2
let [x, y] = [1, 2, 3, 4]
// 物件使用 key 名來接收，必須保證名字一致
let {name, age} = {name: 'kingron', age: 18, money: 99999}
三點運算子
- 展開陣列
let arr1 = [1, 2, 3];
// [1, 2, 3, 4, 5, 6]
let arr2 = [...arr1, 4, 5, 6];
- 預設引數
function func (...args) {
console.log(args)
}
// [1, 2, 3]
func(1, 2, 3)
類與繼承
定義類：
// 建立類
class Person {
// 構造方法
constructor(name, age, gender) {
// 繫結例項屬性
this.name = name;
this.age = age;
this.gender = gender
}
// 例項方法，不需加 function 關鍵字
say() {
console.log(`${this.name} said it ${this.age} years ago!`)
}
}
// 例項化
const p = new Person('kongron', 18, 'M');
p.say()
繼承：
class Student extends Person {
constructor(name, age, gender, school) {
// 呼叫父類的構造方法
super(name, age, gender);
this.school = school;
}
}
JSON 物件的新應用
- JSON.stringify/parse
序列化/反序列化
- 簡寫
- 屬性和值名字相同的可以簡寫
- 方法可以簡寫（省去
function關鍵字）
const name = 'kingron';
const person = {
name,
hello(to) {
console.log(this.name + ' said hello to ' + to)
}
}
// kingron
console.log(person.name);
person.hello('j');
模組化程式設計
- 暴露變數的方式
1.1. 定義時暴露
// m1.js
export add = (a, b) => a + b;
// m2.js
import {add} from 'm1.js'
1.2. 統一暴露
// m1.js
const add = (a, b) => a + b;
const sub = (a, b) => a- b;
export {add, sub}
1.3. 預設
使用 default 關鍵字
// m1.js
export default (a, b) => a + b;
export sub = function(a, b) {
return a - b
}
// m2.js
// 匯入時不需要 {}，可以自定義匯入的名稱，結果為 default 對應的變數
import myadd from 'm1.js'
- 匯入
2.1. js 中匯入
import {add} from 'm1.js'
2.2. html 中匯入
<script src="m1.js" type="module"></script>
Promise
用法說明 & 示例：
/*
* Promise 接收一個函式作為引數
* 該函式又必須接收兩個引數 resolve 和 reject 作為引數
* 在函式體內：
* - 呼叫 resolve，傳入的引數將作為引數傳遞給 then 中的第一個引數
* - 呼叫 reject，傳入的引數將作為引數傳遞給 then 中的第二個引數
*
* 呼叫存在順序限制，如果先呼叫了 resolve/reject 其中一個，另外一個則不會被呼叫
*
* 函式也可以返回新的 Promise 例項
*/
new Promise((resolve, reject) => {
throw "fine, It's not ok";
reject("It's not ok")
setTimeout(() => {
resolve("It's ok")
}, 1000)
}).then(res => {
// 處理結果
console.log(res)
}, err => {
// 處理錯誤
console.log('error in then: ' + err)
}).catch(err => {
/*
* 如果 then 中的第二個引數存在
* 則出現錯誤不會被傳入此方法
*/
// 處理錯誤
console.log('error in catch: ' + err)
})
Promise.all 用法
Promise.all([
new Promise(...),
new Promise(...),
...
]).then(...)