函數默認值

面試中可能會問到下面問題

function say(a = 1) {
  console.log(a);
}
say(null);
say(undefined);
say();
say(0);
console.log(say.length); // say.length表示函數形參個數

關於答案，我先賣個關子，相信你看了下面的解析就會被安排的明明白白。

基本用法

• 1個參數有默認值

// ES6代碼
function say(a = 1) {
  console.log(a);
}

// 轉爲ES5代碼
function say() {
  var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
  console.log(a);
} 

看到這裏，上面的問題你應該就徹底明白啦。。。你可以很自信的在控制檯裏面驗證一下你的答案啦。但是，彆着急，接着往下看👇，你會收穫更多。

• 多個參數第一個有默認值

// ES6代碼
function say(a = 1, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
}

// 轉爲ES5代碼
function say() {
  var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
  var b = arguments.length > 1 ? arguments[1] : undefined;
  var c = arguments.length > 2 ? arguments[2] : undefined;
  console.log(a);
  console.log(b);
  console.log(c);
}

哈哈，是不是跟自己想的不太一樣呢？

• 多個參數第一個無默認值

// ES6代碼
function say(a, b = 1, c) {
  console.log(a);
  console.log(b);
  console.log(c);
}

// 轉爲ES5代碼
function say(a) {
  var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
  var c = arguments.length > 2 ? arguments[2] : undefined;
  console.log(a);
  console.log(b);
  console.log(c);
}

還有這樣子

// ES6代碼
function say(a, b, c = 1) {
  console.log(a);
  console.log(b);
  console.log(c);
}

// 轉爲ES5代碼
function say(a, b) {
  var c = arguments.length > 2 && arguments[1] !== undefined ? arguments[1] : 1;
  console.log(a);
  console.log(b);
  console.log(c);
}

這樣子。。。

// ES6代碼
function say(a = 1, b, c = 1) {
  console.log(a);
  console.log(b);
  console.log(c);
}

// 轉爲ES5代碼
function say() {
  var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
  var b = arguments.length > 1 ? arguments[1] : undefined;
  var c = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  console.log(a);
  console.log(b);
  console.log(c);
}

還有其他情況就不一一列舉啦。

未完待續。。。

其他高級點的用法會在後續補充哦。

寫文不易，喜歡的朋友可以點個關注留個贊。