函數參數解構賦值

解構賦值運用到函數參數上,減少了一些操作同時也增加了一些麻煩.

1.函數參數

let a={name:'小明',age:18}
function wuKongYouLook(b){
console.log(b)
}
wuKongYouLook(a)//{name:'小明',age:18}
wuKongYouLook() //undefined

 

我們可以理解成函數在聲明的時候,如果有一個形參b,則在調用的時候聲明了一個局部變量b,所以即使沒有傳參,也只是沒有值,即undefined.

而傳實參,則相當於又多了個b=a這個賦值的過程,所以函數后續的代碼雖然使用變量b,但實際在操作a的值.這一點在vue項目中涉及雙向綁定時會有明顯感受

 

vue雙向綁定與深淺拷貝

 

2.形參默認值

let a={name:'小明',age:18}
function wuKongYouLook(b={}){
console.log(b)
}
wuKongYouLook(a)//{name:'小明',age:18}
wuKongYouLook() //{}　

 

也就是說,當b=a這一步失敗時,則b取其默認值.這一點很重要　

 

3.函數參數解構賦值

let a={name:'小明',age:18}
    function wuKongYouLook({name,age}){
      console.log(name,age)
      }
      wuKongYouLook(a)//小明,18
      wuKongYouLook() //報錯　　
//這里實際上是省略了一步,let {name,age} =a;即 let 形參 = 實參,所以就可以打印出name,age的值.而不給參數或者參數是undefined時,let {name,age}=null或者undefined都會報錯　

故,我們需要給個默認值

let a={name:'小明',age:18}
    function wuKongYouLook({name,age}={}){
      console.log(name,age)
      }
      wuKongYouLook(a)//小明,18
      wuKongYouLook() //undefined,undefined
//同理,當let {name,age} =null或者undefined時,系統要報錯,但是這時它發現參數有默認值,於是就變成了let {name,age} = {},空對象是可能有name屬性的,那就沒錯,去找找看,沒有,那就返回undefind.　

　　

設置幾種默認值的陷阱,很容易出錯

(1)形參整體設置默認值

上面那個例子就是,在等號的右邊設置想要的默認值

let a={name:'小明',age:18}
    function wuKongYouLook({name,age}={name:'shyno',age:18}){
      console.log(name,age)
      }
      wuKongYouLook(a)//小明,18                       let {name,age}={name:'小明',age:18}
      wuKongYouLook({name:'小紅'}) //小紅,undefinded  let {name,age} = {name:'小紅'}
      wuKongYouLook({})    //undefined,undefined     let {name,age} = {}
      wuKongYouLook() //shyno,18                     let {name,age} = {name:'shyno',age:18}　

原理還是一樣,先看看有沒有實參.除了最后一次調用,都有實參.所以,只有最后一次打印了默認值,即{name:'shyno',age:18}.其他的都是解構了實參

(2)形參解構賦值時設置默認值

let a={name:'小明',age:18}
    function wuKongYouLook({name='shyno',age=17}={}){
      console.log(name,age)
      }
      wuKongYouLook(a)//小明,18                       let {name='shyno',age=17} = {name:'小明',age:18}
      wuKongYouLook({name:'小紅'}) //小紅,17         　let {name='shyno',age=17} = {name:'小紅'}
      wuKongYouLook({})    //shyno,17                 let {name='shyno',age=17} = {}
      wuKongYouLook() //shyno,17                     let {name='shyno',age=17} = null或者undefined