ES6 詳解函式引數(解構賦值與預設值相結合)

2022-04-04 23:32:30 字數 1186 閱讀 5998

對於es6函式的引數解構賦值與預設值相結合,初學很容易迷糊,在網上翻閱一番,並沒有詳細的講解,

在此拿乙個最普及的例子來詳解其中的原理,兩種寫法都是使用了雙重預設值:

// 寫法一function m1( = {})

// 寫法二function m2( =)

1、// 函式沒有引數的情況,引數嚴格為undefined,引數預設值生效

m1() // [0, 0]

m2() // [0, 0]

詳解:寫法一:使用預設的引數「空物件{}」進行解構,實際執行的解構是={},由於右邊x、y嚴格等於undefined,所以使用解構預設值為x = 0, y = 0;

寫法二:使用預設的引數「」進行解構,實際執行的解構是 =,解構成功,解構所得值為x = 0, y = 0;

2、// x 和 y 都有值的情況

m1() // [3, 8]m2() // [3, 8]

詳解:寫法

一、寫法二相同:由於引數不為空,引數預設值無效,所以執行的解構為 = ,解構成功,解構所得值為x = 0, y = 0;

3、// x 有值,y 無值的情況,所傳引數不嚴格為undefined,引數預設值無效;

m1() // [3, 0]

m2() // [3, undefined]

詳解:寫法一:實際執行的解構為 = ,x值為3;解構右側y值嚴格為undefined,所以y使用解構預設值0;

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

4、// x 和 y 都無值的情況,引數預設值無效

m1({}) // [0, 0];m2({}) // [undefined, undefined]

詳解:寫法一:實際執行的解構為 = {},x值為0;y值也為0;

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

5、//傳入不包含x,y的物件

m1() // [0, 0]

m2() // [undefined, undefined]

詳解:寫法一:實際執行的解構為 = ,解構失敗,使用x、y的預設值,x值為0;y值也為0;

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

ES6 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...

ES6解構賦值

一 基本用法 解構 destructuring 按照一定的模式,從陣列或者物件中提取值,對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...