TypeScript - 其餘引數

其餘引數

在 TypeScript 中，其餘引數允許函式接受可變數量的引數並將它們儲存為陣列。當您希望定義一個可以處理可變數量引數的函式時，這非常有用。

其餘引數允許您將剩餘的引數收集到一個數組中。其餘引數的名稱成為儲存此陣列的變數。

其餘引數語法

其餘引數使用省略號/三個點 (...) 後跟函式宣告中的引數名稱來編寫。我們使用陣列型別作為其餘引數的型別註解。

function funcName(...rest: type[]): returnType{
   // function body;
}

其中，

funcName - 它是我們函式的名稱。
...rest - 它將多個引數儲存到名為 rest 的陣列中。
type[] - 它指定引數的型別

一個函式可以有任意數量的普通引數以及其餘引數。

其餘引數必須位於引數列表的最後。

function funcName (...rest1: type[], param1: type){}
//Error : A rest parameter must be last in a parameter list.

函式定義中只能有一個其餘引數。

function funcName (...rest1: type[], ...rest2: number[]){}
//Error: A rest parameter must be last in a parameter list.

與上述函式宣告相同，函式表示式也可以有其餘引數。

let getSum = function(...rest: type[]){
   function body;
}

示例

讓我們透過 TypeScript 中的一些示例來了解其餘引數。

示例：可變長度引數列表

使用其餘引數，我們可以使用不同的引數數量來呼叫函式。其餘引數可以處理這些不同的引數數量。

在下面的示例中，我們定義了一個名為 sum 的函式，它帶有一個其餘引數 ...nums。引數儲存為陣列 nums 的元素。每次我們使用不同數量的引數呼叫函式時，nums 都會儲存這些引數。並且我們可以在 nums 上執行任何陣列操作。

function sum(...nums: number[]) {
    let totalSum = 0;
    for (let num of nums) {
        totalSum += num;
    }
    return totalSum;
}
console.log(sum(10, 20, 30, 40));
console.log(sum(10, 20));
console.log(sum());

編譯後，它將生成以下 JavaScript 程式碼。

function sum(...nums) {
    let totalSum = 0;
    for (let num of nums) {
        totalSum += num;
    }
    return totalSum;
}
console.log(sum(10, 20, 30, 40));
console.log(sum(10, 20));
console.log(sum());

上述示例程式碼的輸出如下：

100
30
0

示例：訪問引數長度

在此示例中，我們定義了一個名為 getLen 的函式，它帶有一個其餘引數 ...theArgs。我們使用陣列的 length 屬性來獲取引數的長度或數量。

function getLen(...theArgs:number[]) {
  console.log(theArgs.length);
}
getLen();
getLen(5);
getLen(5, 6, 7);

編譯後，它將生成以下 JavaScript 程式碼。

function getLen(...theArgs) {
    console.log(theArgs.length);
}
getLen();
getLen(5);
getLen(5, 6, 7);

上述示例程式碼的輸出如下：

0
1
3

其餘引數 & 展開運算子

我們已經討論了其餘引數。展開運算子用三個點 (...) 表示，與其餘引數相同，但工作方式不同。

其餘引數用於將剩餘的引數收集為一個數組。展開運算子將陣列的元素擴充套件為單個元素。

展開引數必須具有元組型別或傳遞給其餘引數。

示例：陣列作為展開引數

在此示例中，我們定義了兩個陣列 arr1 和 arr2，每個陣列包含三個元素。我們對 arr1 呼叫 push() 方法，並將 ...arr2 作為引數傳遞。這作為展開引數工作，因為它將 arr2 的元素擴充套件為單個元素。

const arr1: number[] = [10, 20, 30];
const arr2: number[] = [40, 50, 60];
arr1.push(...arr2);
console.log(arr1);

編譯後，它將生成以下 JavaScript 程式碼。

const arr1 = [10, 20, 30];
const arr2 = [40, 50, 60];
arr1.push(...arr2);
console.log(arr1);

上述程式碼的輸出如下：

[10, 20, 30, 40, 50, 60]

示例：查詢最大/最小數字

在下面的示例中，我們找到最大數字。我們定義了一個名為 getMax 的函式，它帶有一個引數，...args: number[]。我們呼叫 Math.max() 方法，並傳遞引數 ...args。引數 ...args 中的三個點充當展開運算子。它擴充套件/解包陣列 args 的元素。

function getMax(...args:number[]){ // here ...args as rest parameter
    return Math.max(...args); // here ... works as spread operator
}
console.log(getMax(10,20,30,40));
console.log(getMax(10,20,30));

編譯後，它將生成以下 JavaScript 程式碼。

function getMax(...args) {
    return Math.max(...args); // here ... works as spread operator
}
console.log(getMax(10, 20, 30, 40));
console.log(getMax(10, 20, 30));

上述示例程式碼的輸出如下：

40
30

示例：傳遞其餘引數

其餘引數將引數解包為單個元素。

在此示例中，我們定義了一個名為 multiply 的函式，它接受三個數字型別的引數並返回它們的乘積。函式的返回型別也是數字。我們呼叫該函式，並傳遞一個其餘引數 (...numbers)。

function multiply(a: number, b: number, c: number): number {
    return a * b * c;
}
let numbers: [number, number, number];
numbers = [2, 3, 4];
console.log(multiply(...numbers));

編譯後，它將生成以下 JavaScript 程式碼。

function multiply(a, b, c) {
    return a * b * c;
}
let numbers;
numbers = [2, 3, 4];
console.log(multiply(...numbers));

上述示例程式碼的輸出如下：

列印頁面