ES6之函數的擴展(一)

主要講解：

1. 參數默認值
2. 參數默認值位置
3. 函數的length屬性
4. "參數"做用域

1.參數默認值

function log(x,y='babe'){
    console.log(x,y);
}
  
log(1,'')
//1 ""

log(1,[])
//1 []

log(1,0)
//1 0

log(1,false)
//1 false

log(1,null)
//1 null
-----------------------------
log(1)
//1 "babe"

log(1,undefined)
//1 "babe"

上面的代碼徹底等價於:

function log(x,y){
    if(y === undefined){
        y = 'babe';
    }
    console.log(x,y);
}

而es5中經常使用的默認值賦值方式

function log(x,y){
    y = y || 'babe'; 
    // 此時y會進行隱式轉換 0/''/[]/false 的狀況都會被賦值爲'babe',不過若是需求就是如此,那仍是用此種方式書寫
    console.log(x,y);
}

**能夠發現一個問題ES6以後不少值比較都是徹底等於undefined的狀況,
不像es5,''/[]/0 隱式轉換爲 false , null == undefined //true
----一些美麗的瑕疵都被遮掉了，之後代碼就顯得一覽無遺了

注意:es6中進行過內部包裝轉換的代碼參數定義是採用let,故同一層級的做用域內不要出現屢次聲明,會報錯

---

用途：解構賦值 關鍵就是看變量個數 ,{...} 括起來的實際上是一個參數，在後面進行解構了而已

function log({user,pwd='123456'}={}){
    console.log(`user: ${user},password: ${pwd}`);
}
log4()
//user: undefined,password: 123456

log4({user:'babe'})
//user: babe,password: 123456

阮老師書中說的練習能夠這麼理解:

function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
//m1中不只對函數參數給了默認值{},並且對待解構的x,y分別賦予了默認值0
//m2中僅僅對函數參數給了默認值{x: 0, y: 0 } ,那這就僅在函數調用時未傳參或者傳undefined進去的時候，使用了默認值

---

2.參數默認值位置

一般寫法是置於函數參數的最後,能夠放中間,這樣一來意義就不大了，仍是要手動傳進來(想使用默認值就得傳undefined)

function log(user='babe',pwd){
    console.log(`user: ${user},password: ${pwd}`);
}
log(undefined,123)
//user: babe,password: 123
//能夠發現這種寫法就毫無心義了,方法擴展性爲0。固然也不會有人這樣寫代碼了

---

3.函數的length屬性

指代函數語氣傳入的參數個數 -- 不包括指定了默認值的參數(因爲正常寫法默認參數置於最後,length屬性也僅遍歷到默認參前一個爲止)

function log(user='babe',pwd){
    console.log(`user: ${user},password: ${pwd}`);
}
log.length //0

function log(pwd,user='babe'){
    console.log(`user: ${user},password: ${pwd}`);
}
log.length //1

---

4."參數"做用域

es5中函數參數的做用域與函數體做用域處於同一層級,es6中設置了默認值以後，會另外建立一層做用域，位於函數體上面,參數做用域中不存在的變量會往上一層找尋，直至找到window下

---

若是bug請指正，Thanks♪(･ω･)ﾉ!