預設參數( Default parameters )

翻譯不完整。 請幫助我們翻譯這篇文章!

函式預設參數 允許沒有值傳入或是傳入值為 undefined 的情況下,參數能以指定的預設值初始化。

語法

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
   要執行的程序
}

說明

在 JavaScript 中,函式的參數預設值都為 undefined 。然而,指定不同的預設值可能在一些場景很有用。這也是函式參數預設值可以幫上忙的地方。

以往設定預設值有個普遍方法:在函式的內容裡檢查傳入參數是否為 undefined ,如果是的話,爲他指定一個值。如下列範例,若函式被呼叫時,並沒有提供 b 的值,它的值就會是 undefined,在計算 a*b 時,以及呼叫 multiply 時,就會回傳 NaN。然而這在範例的第二行被阻止了::

function multiply(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1;
  return a * b;
}

multiply(5, 2); // 10
multiply(5, 1); // 5
multiply(5);    // 5

有了 ES2015 的預設參數,再也不用於函式進行檢查了,現在只要簡單的在函式的起始處為 b 指定 1 的值:

function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5, 1); // 5
multiply(5);    // 5

範例

傳入 undefined

這邊第二段函式呼叫中,僅管第二個傳入參數在呼叫時明確地指定為undefined(雖不是null),其顏色參數的值是預設值(rosybrown)。

function setBackgroundColor(element, color = 'rosybrown') {
  element.style.backgroundColor = color;
}

setBackgroundColor(someDiv);            // color set to 'rosybrown'
setBackgroundColor(someDiv, undefined); // color set to 'rosybrown' too
setBackgroundColor(someDiv, 'blue');    // color set to 'blue' 

呼叫時賦予值

跟Python等語言不同的地方是,先前預設的代數值會拿來進行函式內的程序,也因此在函式呼叫的時候,會建立新物件。

function append(value, array = []) {
  array.push(value);
  return array;
}

append(1); //[1]
append(2); //[2], 而非 [1, 2]

諸如此類的做法,也適用在函式和變量。

function callSomething(thing = something()) {
 return thing;
}

function something() {
  return 'sth';
}

callSomething();  //sth

預設的參數中,先設定的可提供之後設定的使用

先前有碰到的參數,後來的即可使用。

function singularAutoPlural(singular, plural = singular + '們', 
                            rallyingCry = plural + ',進攻啊!!!') {
  return [singular, plural, rallyingCry]; 
}

//["壁虎","壁虎們", "壁虎,進攻啊!!!"]
singularAutoPlural('壁虎');

//["狐狸","火紅的狐狸們", "火紅的狐狸們,進攻啊!!!"]
singularAutoPlural('狐狸', '火紅的狐狸們');

//["鹿兒", "鹿兒們", "鹿兒們 ... 有所好轉"]
singularAutoPlural('鹿兒', '鹿兒們', '鹿兒們平心靜氣的 \
   向政府請願,希望事情有所好轉。');

This functionality is approximated in a straight forward fashion and demonstrates how many edge cases are handled.

function go() {
  return ':P';
}

function withDefaults(a, b = 5, c = b, d = go(), e = this, 
                      f = arguments, g = this.value) {
  return [a, b, c, d, e, f, g];
}

function withoutDefaults(a, b, c, d, e, f, g) {
  switch (arguments.length) {
    case 0:
      a;
    case 1:
      b = 5;
    case 2:
      c = b;
    case 3:
      d = go();
    case 4:
      e = this;
    case 5:
      f = arguments;
    case 6:
      g = this.value;
    default:
  }
  return [a, b, c, d, e, f, g];
}

withDefaults.call({value: '=^_^='});
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]


withoutDefaults.call({value: '=^_^='});
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

函式內再定義函式

Introduced in Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30). Functions declared in the function body cannot be referred inside default parameters and throw a ReferenceError (currently a TypeError in SpiderMonkey, see bug 1022967). Default parameters are always executed first, function declarations inside the function body evaluate afterwards.

// 行不通的! 最後會丟出 ReferenceError。
function f(a = go()) {
  function go() { return ':P'; }
}

Parameters without defaults after default parameters

Prior to Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2), the following code resulted in a SyntaxError. This has been fixed in bug 777060 and works as expected in later versions. Parameters are still set left-to-right, overwriting default parameters even if there are later parameters without defaults.

function f(x = 1, y) { 
  return [x, y]; 
}

f(); // [1, undefined]
f(2); // [2, undefined]

Destructured parameter with default value assignment

You can use default value assignment with the destructuring assignment notation:

function f([x, y] = [1, 2], {z: z} = {z: 3}) { 
  return x + y + z; 
}

f(); // 6

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Function Definitions' in that specification.
Standard Initial definition.
ECMAScript (ECMA-262)
The definition of 'Function Definitions' in that specification.
Living Standard

瀏覽器的兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
功能特徵 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本支援 49 15.0 (15.0) Edge No support 10
Parameters without defaults after default parameters 49 26.0 (26.0) ? ? 10
Destructured parameter with default value assignment 49 41.0 (41.0) ? ? ?
功能特徵 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本支援 No support 49 15.0 (15.0) No support No support No support 49
Parameters without defaults after default parameters No support 49 26.0 (26.0) ? ? ? 49
Destructured parameter with default value assignment No support ? 41.0 (41.0) ? ? ? ?

要不要也看看