1、es6之前的函數參數默認值寫法

1.1、使用短路或||的寫法

• 當y為空時，y判斷為false ，走||右邊的，所以y = 'world';
• 當y不為空時，y判斷為true，不需要再運行||右邊的，所以 y = y

function log(x, y) {y = y || 'World';console.log(x, y);
}log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

這中寫法有個問題，就是第三種輸出中的結果。當y值設置為“”時，走短路與運算判斷為false，從而將默認值賦予了y。但是原本的意思是y的值就是“”，從而希望輸出的是 Hello 。

1.2 添加typeof 判斷是否為undefined

function log(x, y) {if (typeof y === 'undefined') {y = 'World';}console.log(x, y);
}log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello 

這種寫法可以避免1.1中y值為空串的情況。

2、es6寫法

function log(x, y = 'World') {console.log(x, y);
}log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

上面是es6的寫法，簡單方便。

下面是解構賦值和函數默認值結合：

方法一是個解構變量設置默認值，二默認值生效的條件是對象屬性值嚴格等于undefined。
方法二是設置對象的值，沒有設置解構變量的默認值。
在沒有參數和x y都有值的情況下，兩者的結果一樣。其他情況下兩者有區別。

// 寫法一
function m1({x = 0, y = 0} = {}) {return [x, y];
}// 寫法二
function m2({x, y} = { x: 0, y: 0 }) {return [x, y];
}// 函數沒有參數的情況
m1() // [0, 0]
m2() // [0, 0]// x 和 y 都有值的情況
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]// x 有值，y 無值的情況
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]// x 和 y 都無值的情況
m1({}) // [0, 0];
m2({}) // [undefined, undefined]m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]