ES6(01)
ES6:
在不改變原理的基礎上,純簡化了程式碼
let: 代替var宣告變數:
特點:
1. 不會被宣告提前
let會檢查在當前作用域內,let之前不允許提前使用該變數
2. 相同作用域內不允許重複let第二個變數
3. 僅在當前塊作用域內有效
問題: 塊內的變數即使不執行,也會被提前到塊外部,汙染外部!
解決: 用let代替var,將變數限定在塊內
let為js增加了塊作用域: if else else if for while do...while switch..case
原理: 匿名函式自調
何時: 只要宣告變數,一律用let
用let+for實現閉包結構:
for(let i=0;i<xxx.length;i++){
//(function(i){
迴圈體
//})(i);
}
引數增強:
1. 預設值:
.indexOf(val, fromi=0){
//fromi=fromi||0;
}
強調: 帶預設值的引數必須放結尾
2. rest: 剩餘: 代替arguments
arguments的問題:
1. 不是陣列,而是類陣列物件! 用不了陣列API
2. arguments只能獲得全部引數! 無法有選擇的獲得部分引數
3. arguments名字太長!
解決: rest
何時: 今後,只要代替arguments獲得不確定個數的引數值時,都用rest
如何: 在定義函式時的引數列表中:
function fun(引數1, 引數2, ...陣列名)
相容:
類陣列物件轉為陣列:
var arr=Array.prototype.slice.call(arguments)
//arguments.slice()//完整複製arguments
強調: rest的引數陣列必須放在引數列表結尾
3. spread: 散播: 代替apply 打散陣列型別的引數
為什麼: apply的主要目的不是打散陣列型別引數,而是替換函式中的this。只不過,可以順便打散陣列型別引數
何時: 如果專門只希望打散陣列型別引數,不附加其它操作時。
如何: 在呼叫函式時的引數值()內
函式(...陣列)
相容: 函式.apply(null,陣列)
箭頭函式: 對一切回撥函式和匿名函式的簡化
1. 去function換箭頭=>
2. 如果只有一個引數,可省略()
3. 如果只有一句話,可省略{}
如果僅有的一句話還是return,則可省略return
特點: 箭頭函式內外共用this!
優: 不用bind,也能讓內外this統一
問題: 有時,反而希望內外this不通用
比如: btn.onclick=function(){ ... this->btn ... }
()=>{ ... this->window ...} 錯誤
e=>{ ... e.target->btn ...} 正確
模板字串: 簡化的是大段字串複雜字串的拼接
何時: 只要複雜的字串拼接,都用模板字串
如何:
整個字串被` `包裹
在``內支援換行,"",'',而不會發生字元衝突
需要動態拼接表示式的值: ${表示式}
解構: 將一個物件中的屬性或陣列中的元素,拆解給多個變數
何時: 簡化批量賦值!
如何: 3種:
1. 陣列解構: 將陣列中的元素值,拆解後,賦值給多個變數
/*var*/ [變數1,變數2,...]=[元素1,元素2,...]
執行結果:
變數1=元素1;
變數2=元素2;
匹配: 下標對下標
2. 物件解構: 將物件中的屬性值,拆解後,賦值給多個變數
{屬性1:變數1,屬性2:變數2,...}={ 屬性1:值1,屬性2:值2,...}
3. 引數結構:
定義函式時:
function fun(...,[引數1,引數2,...])
{屬性1:變數1,屬性2:變數2,...}
呼叫函式時:
fun(...,arr)
obj
for of: 簡化for迴圈
for(var elem of arr)
其中of 會依次取出arr中每個元素值,自動儲存到變數elem中
缺點: 1. 只能獲得元素值,無法獲得當前位置i
2. 只能從頭到尾逐個完整遍歷,不能有選擇的遍歷
3. 如果陣列中是原始型別的值,則elem是按值傳遞得到的副本。修改副本,無法影響原陣列元素
強調: for...of,只能遍歷數字下標的陣列或類陣列物件
for...in,專門遍歷自定義下標的關聯陣列或物件
class: 對OOP
1. class定義:
class 型別名{
constructor(屬性引數列表){
this.屬性名=屬性引數;
}
方法名(){ ... this.屬性名 ... }
... ...
}
如何: 3步:
1. 用class封裝建構函式和原型物件方法定義
2. 建構函式名提升為class名,建構函式更名為固定的關鍵詞constructor
3. 直接寫在class中的方法,預設都儲存在原型物件中
2. 繼承:
1. setPrototypeOf -> extends father
2. 借用建構函式: super(引數值列表)
不再需要.call(this,...)
強調: class Flyer已經不允許直接呼叫
3. 訪問器屬性: 驗證, 虛擬/計算屬性
class內:
get 訪問器屬性(){}
set 訪問器屬性(val){ ... ... }
4. 靜態方法:
static 方法名(){}
*****Promise:
什麼是: 對傳統回撥函式的規範寫法
為什麼: callback hell
何時: 只要定義帶回調函式引數的函式時,都要用promise
如何:
1. 定義接收回調函式的主函式
function fun(){
return new Promies(function(callback){
...
callback();
...
})
}
1. 去掉引數中的callback
2. 用return new Promise(function(){
原函式邏輯
})
3. 將callback寫在Promise物件的引數函式中的引數列表中
2. 呼叫主函式執行,並傳入下一個要執行的回撥函式
fun()//return Promise
.then(callback)
如何:
1. 主函式fun不再接收任何回撥函式引數
2. 在主函式呼叫後用.then(callback),將callback傳給fun中的Promies物件的callback引數。
異常處理: .then() .catch(fun)
return new Promise(function(resolve,reject){
//函式體
//如果執行成功
//呼叫resolve()
//否則
//呼叫reject()
})
Promise.all
什麼是: 等待多個任務都完成後,才開始後續操作
何時: 如果需要等待多個任務時
如何: Promise.all([
支援Promise的函式(),
... ... ,
]).then(function(){ 後續任務 })