From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../functions/default_parameters/index.html | 292 +++++++++++++++++++++ 1 file changed, 292 insertions(+) create mode 100644 files/zh-tw/web/javascript/reference/functions/default_parameters/index.html (limited to 'files/zh-tw/web/javascript/reference/functions/default_parameters') diff --git a/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html b/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..6faacba9a3 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,292 @@ +--- +title: 預設參數( Default parameters ) +slug: Web/JavaScript/Reference/Functions/Default_parameters +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +
{{jsSidebar("Functions")}}
+ +

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

+ +

語法

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

說明

+ +

在 JavaScript 中，函式的參數預設值都為 {{jsxref("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 {{geckoRelease(33)}}. Functions declared in the function body cannot be referred inside default parameters and throw a {{jsxref("ReferenceError")}} (currently a {{jsxref("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 {{geckoRelease(26)}}, the following code resulted in a {{jsxref("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

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}}
+ +

瀏覽器的兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能特徵ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本支援{{CompatChrome(49)}}{{CompatGeckoDesktop("15.0")}}Edge{{CompatNo}}{{CompatSafari(10)}}
Parameters without defaults after default parameters{{CompatChrome(49)}}{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatSafari(10)}}
Destructured parameter with default value assignment{{CompatChrome(49)}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能特徵AndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
基本支援{{CompatNo}}{{CompatChrome(49)}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(49)}}
Parameters without defaults after default parameters{{CompatNo}}{{CompatChrome(49)}}{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49)}}
Destructured parameter with default value assignment{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

要不要也看看

+ + -- cgit v1.2.3-54-g00ecf