資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學TypeScript 中的剩餘引數和實參
TypeScript 是一種功能豐富的程式語言，在使用 TypeScript 開發 Web 應用程式時，瞭解 TypeScript 的所有功能非常必要。剩餘引數和實參就是 TypeScript 的一項重要功能。
本教程將透過各種程式碼示例，教你如何在 TypeScript 中使用剩餘引數和實參。
什麼是剩餘引數和實參？
剩餘引數用於在不知道需要向函式傳遞多少個引數時，將多個引數傳遞給函式。剩餘引數名稱後跟“…”（三個點）。
呼叫函式時傳遞多個引數，這些引數被稱為剩餘實參。
使用剩餘引數和實參的規則
剩餘引數可以接受 0 到 N 個引數。
剩餘引數必須位於引數列表的最後。
函式只能包含一個剩餘引數。
剩餘引數的型別可以是字串、數字、布林值、物件、使用者定義型別等的陣列。
剩餘引數的名稱可以與普通的引數名稱相同。
語法
使用者可以按照以下語法在 TypeScript 中使用剩餘引數。
function func1(...numbers: number[]) {
}
func1(1, 2, 3, 4, 5);
在上面的語法中，func1() 函式包含名為“numbers”的剩餘引數，這是一個包含未指定元素的陣列。之後，我們透過傳遞多個數字作為引數來呼叫該函式。
示例
在下面的示例中，我們建立了 changeSign() 函式來更改數字的符號，該函式採用“nums”剩餘引數。在 changeSign() 函式中，我們使用 map() 方法將數字與其相反的符號對映到更新的陣列，並從函式返回新陣列。
我們透過傳遞不同數量的引數來呼叫 changeSign() 引數，在輸出中，我們可以觀察到它會列印輸出而不會顯示任何錯誤。透過這種方式，在使用剩餘引數時，我們可以向函式傳遞多個引數。
// Rest parameters in typescript to change sign of numbers
function changeSign(...nums: number[]): number[] {
return nums.map((num) => num * -1);
}
let changedSigns = changeSign(1, -2, 3, 4, 5);
console.log(changedSigns);
changedSigns = changeSign(10, -12);
console.log(changedSigns);
編譯後，將生成以下 JavaScript 程式碼：
function changeSign() {
var nums = [];
for (var _i = 0; _i < arguments.length; _i++) {
nums[_i] = arguments[_i];
}
return nums.map(function (num) { return num * -1; });
}
var changedSigns = changeSign(1, -2, 3, 4, 5);
console.log(changedSigns);
changedSigns = changeSign(10, -12);
console.log(changedSigns);
示例
在下面的示例中，stringMerger() 函式接受兩個引數。第一個是字串引數，第二個是字串型別的剩餘引數。由於第一個字串引數，我們始終需要在呼叫函式時傳遞一個字串值。之後，我們可以傳遞未指定的引數數量，剩餘引數將處理這些引數。
在函式中，我們遍歷透過剩餘引數獲得的字串陣列，並將所有陣列元素合併到 str1 中。最後，我們返回 str1 字串。
我們透過傳遞多個字串來執行 stringMerger() 函式。str1 將處理第一個引數，str2 將處理我們可以從輸出中觀察到的所有其他引數。
// Function to concatenate strings
function stringMerger(str1: string, ...str2: string[]): string {
for(let i=0; i<str2.length; i++){
str1 += str2[i];
}
return str1;
}
// Executing the function with different number of arguments
let finalStr = stringMerger("Hello", " ", "World", "!");
console.log(finalStr);
finalStr = stringMerger("Hello", " ", "World", "!", " ", "How", " ", "are", " ", "you", "?");
console.log(finalStr);
finalStr = stringMerger("ABCDEF");
console.log(finalStr);
編譯後，將生成以下 JavaScript 程式碼：
// Function to concatenate strings
function stringMerger(str1) {
var str2 = [];
for (var _i = 1; _i < arguments.length; _i++) {
str2[_i - 1] = arguments[_i];
}
for (var i = 0; i < str2.length; i++) {
str1 += str2[i];
}
return str1;
}
// Executing the function with different number of arguments
var finalStr = stringMerger("Hello", " ", "World", "!");
console.log(finalStr);
finalStr = stringMerger("Hello", " ", "World", "!", " ", "How", " ", "are", " ", "you", "?");
console.log(finalStr);
finalStr = stringMerger("ABCDEF");
console.log(finalStr);
示例
下面的示例演示了使用者定義資料型別的剩餘引數的使用。我們定義了包含“name”和“id”屬性的“User”介面。
createUser() 函式採用“User”型別的剩餘引數，並列印所有使用者的詳細資訊。此外，我們還建立了多個使用者物件。
我們執行了三次 createUser() 函式，並傳遞了不同數量的使用者物件作為引數。在輸出中，我們可以看到它列印使用者詳細資訊而沒有任何錯誤。
// Creating the interface for user-defined types
interface User {
name: string;
id: number;
}
// Rest parameter of User type
function createUser(...users: User[]) {
// Printing all user details
users.forEach(user => {
console.log(`Name: ${user.name}, ID: ${user.id}`);
});
}
// Creating user objects
let user1: User = { name: "Man", id: 1 };
let user2: User = { name: "Shah", id: 2 };
let user3: User = { name: "Shubham", id: 3 };
let user4: User = { name: "Ram", id: 4 };
console.log("First function call!")
createUser(user1, user2, user3, user4);
console.log("Second function call!")
createUser(user1, user2);
console.log("Third function call!")
createUser(user1, user2, user3);
編譯後，將生成以下 JavaScript 程式碼：
// Rest parameter of User type
function createUser() {
var users = [];
for (var _i = 0; _i < arguments.length; _i++) {
users[_i] = arguments[_i];
}
// Printing all user details
users.forEach(function (user) {
console.log("Name: ".concat(user.name, ", ID: ").concat(user.id));
});
}
// Creating user objects
var user1 = { name: "Man", id: 1 };
var user2 = { name: "Shah", id: 2 };
var user3 = { name: "Shubham", id: 3 };
var user4 = { name: "Ram", id: 4 };
console.log("First function call!");
createUser(user1, user2, user3, user4);
console.log("Second function call!");
createUser(user1, user2);
console.log("Third function call!");
createUser(user1, user2, user3);
我們學習瞭如何在 TypeScript 中使用剩餘引數。使用剩餘引數的主要目的是在不確定要向函式傳遞多少個引數時處理引數。基本上，它用於處理可選引數。
瀏覽量：508
