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

其餘參數（rest parameter） 語法可以讓我們表示不確定數量的參數，並將其視為一個陣列。

+ +

語法

+ +
function f(a, b, ...theArgs) {
+  // ...
+}
+
+ +

描述

+ +

如果函式的最後一個命名參數以 ... 開頭，它會被視為一個陣列。該陣列的元素會被置於索引從 0（含）到的 theArgs.length（不含）位置，並且被視為一個函式的參數。

+ +

在上面的範例中，theArgs 會將函式f中第三個(含)以後的參數收集起來。

+ +

其餘參數和 arguments 物件的差異

+ +

以下是其餘參數和 arguments 物件三個主要的差異：

+ + + +

將參數轉成陣列

+ +

其餘參數被介紹作為取代用 arguments 寫的範例程式。

+ +
// 在有其餘參數之前，你可能見過下面的程式碼：
+function f(a, b) {
+  var args = Array.prototype.slice.call(arguments, f.length); // f.length 表示 arguments 的數量
+
+  // …
+}
+
+// 現在可以寫成這樣
+
+function f(a, b, ...args) {
+
+}
+
+ +

解構其餘參數 rest parameters

+ +

其餘參數可以被解構，換句話說，可以把這個陣列解開，並將各個元素取出成為個別的變數。請參考解構賦值。

+ +
function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b 和 c 都是 undefined)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (第四個參數不會被解構，因為解構式只有三個定義好的變數名稱)
+ +

範例

+ +

因為 theArgs 是一個陣列，所以它會有 length 屬性，作為表示參數數量：

+ +
function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+
+ +

在接下來的範例中，其餘參數被用來收集第一個之後的所有引數並存在陣列中。 在這個陣列裡的每個元素(數字)，都會和第一個參數相乘後取代原本的元素，最後再將取代元素後的陣列回傳。

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+
+ +

下列範例展示 Array 的方法可以在其餘參數上被使用，但 arguments 則不行。

+ +
function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // 顯示 1, 3, 5, 7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // 因為前一行會因為 arguments 沒有sort()這個方法而造成TypeError，所以永遠不會執行此行。
+}
+
+console.log(sortArguments(5, 3, 7, 1)); // 會拋出 TypeError (arguments.sort is not a function)
+
+ +

為了要在 arguments 物件上使用 Array 的方法，可以將它轉換成真的 Array 實體，或者以 apply() 直接調用需要的方法。

+ +
function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // 顯示 1, 3, 5, 7
+
+ +

規範

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

瀏覽器相容性

+ +
+ + +

{{Compat("javascript.functions.rest_parameters")}}

+
+ +

參見

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