ES6--詳解函數參數(解構賦值與默認值相結合)


對於ES6函數的參數解構賦值與默認值相結合,初學很容易迷糊,在網上翻閱一番,並沒有詳細的講解,
在此拿一個最普及的例子來詳解其中的原理,兩種寫法都是使用了雙重默認值:

// 寫法一function m1({x = 0, y = 0} = {}) {

  return [x, y];}

// 寫法二function m2({x, y} ={ x: 0, y: 0 }) {

  return [x, y];}

1、// 函數沒有參數的情況,參數嚴格為undefined,參數默認值生效

m1() // [0, 0]
m2() // [0, 0]
詳解:

寫法一:使用默認的參數“空對象{}”進行解構,實際執行的解構是{x = 0, y = 0}={},由於右邊x、y嚴格等於undefined,所以使用解構默認值為x = 0, y = 0;

寫法二:使用默認的參數“{ x: 0, y: 0 }”進行解構,實際執行的解構是{x, y} ={ x: 0, y: 0 },解構成功,解構所得值為x = 0, y = 0;

 

2、// x 和 y 都有值的情況
m1({x: 3, y: 8}) // [3, 8]m2({x: 3, y: 8}) // [3, 8]

詳解:寫法一、寫法二相同:由於參數不為空,參數默認值無效,所以執行的解構為{x = 0, y = 0} = {x: 3, y: 8},解構成功,解構所得值為x = 0, y = 0;

 

3、// x 有值,y 無值的情況,所傳參數不嚴格為undefined,參數默認值無效;

m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]
詳解:寫法一:實際執行的解構為{x = 0, y = 0} = {x: 3},x值為3;解構右側y值嚴格為undefined,所以y使用解構默認值0;

寫法二:實際執行的解構為{x, y} = {x: 3},x值為3;解構右側y值嚴格為undefined,所以y解構時也為undefined;

 

4、// x 和 y 都無值的情況,參數默認值無效
m1({}) // [0, 0];m2({}) // [undefined, undefined]

詳解:

寫法一:實際執行的解構為{x = 0, y = 0} = {},x值為0;y值也為0;
寫法二:實際執行的解構為{x, y} ={},由於解構時,右側x,y完全為undefined,且沒有默認值,所以x、y都為undefined;

 

5、//傳入不包含x,y的對象
m1({z: 3}) // [0, 0]

m2({z: 3}) // [undefined, undefined]
詳解:寫法一:實際執行的解構為{x = 0, y = 0} = {Z:3},解構失敗,使用x、y的默認值,x值為0;y值也為0;

寫法二:實際執行的解構為{x, y} ={z:3},由於解構失敗,右側x,y完全為undefined,且沒有默認值,所以x、y都為undefined;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM