對於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;