数据结构
网络
关系数据库管理系统 (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
