📌  相关文章
📜  TypeScript-函数

📅  最后修改于: 2020-10-19 03:52:01             🧑  作者: Mango

功能是可读，可维护和可重用代码的构建块。函数是执行特定任务的一组语句。函数将程序组织成逻辑代码块。一旦定义，可以调用函数来访问代码。这使代码可重用。此外，功能使读取和维护程序代码变得容易。

函数声明告诉编译器函数的名称，返回类型和参数。函数定义提供了函数的实际身体。

Sr.No Funtions & Description
1. Defining a Function

A function definition specifies what and how a specific task would be done.
2. Calling a Function

A function must be called so as to execute it.
3. Returning Functions

Functions may also return value along with control, back to the caller.
4. Parameterized Function

Parameters are a mechanism to pass values to functions.

可选参数

当不需要为执行函数强制传递参数时，可以使用可选参数。通过在参数名称后附加问号，可以将参数标记为可选。可选的参数应该被设置为一个函数的最后一个参数。使用可选参数声明函数的语法如下：

function function_name (param1[:type], param2[:type], param3[:type])

示例：可选参数

function disp_details(id:number,name:string,mail_id?:string) { 
   console.log("ID:", id); 
   console.log("Name",name); 
   
   if(mail_id!=undefined)  
   console.log("Email Id",mail_id); 
}
disp_details(123,"John");
disp_details(111,"mary","mary@xyz.com");

  • 上面的示例声明了一个参数化函数。在这里，第三个参数，即mail_id是可选参数。

  • 如果在函数调用过程中未向可选参数传递值，则该参数的值将设置为undefined。

  • 仅当参数传递了值时，该函数才会打印mail_id的值。

在编译时，它将生成以下JavaScript代码-

//Generated by typescript 1.8.10
function disp_details(id, name, mail_id) {
   console.log("ID:", id);
   console.log("Name", name);
    
   if (mail_id != undefined)
      console.log("Email Id", mail_id);
}
disp_details(123, "John");
disp_details(111, "mary", "mary@xyz.com");

上面的代码将产生以下输出-

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id mary@xyz.com

休息参数

其余参数类似于Java中的变量参数。其余参数并不限制您可以传递给函数的值的数量。但是，传递的值必须全部为同一类型。换句话说，其余参数充当同一类型的多个参数的占位符。

要声明rest参数，参数名称以三个句点为前缀。任何非休息参数都应在休息参数之前。

示例：剩余参数

function addNumbers(...nums:number[]) {  
   var i;   
   var sum:number = 0; 
   
   for(i = 0;i

  • 函数addNumbers（）声明接受一个rest参数nums 。 rest参数的数据类型必须设置为数组。而且，一个函数最多可以具有一个剩余参数。

  • 通过分别传递三个和六个值来调用该函数两次。

  • for循环遍历参数列表，传递给函数并计算它们的总和。

在编译时，它将生成以下JavaScript代码-

function addNumbers() {
   var nums = [];
   for (var _i = 0; _i < arguments.length; _i++) {
      nums[_i - 0] = arguments[_i];
   }
    var i;
   var sum = 0;
    
   for (i = 0; i < nums.length; i++) {
      sum = sum + nums[i];
   }
   console.log("sum of the numbers", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

上面代码的输出如下-

sum of numbers 6 
sum of numbers 50

默认参数

默认情况下，还可以为功能参数分配值。但是，此类参数也可以是显式传递的值。

句法

function function_name(param1[:type],param2[:type] = default_value) { 
}

注意-参数不能同时声明为可选参数和默认值。

示例：默认参数

function calculate_discount(price:number,rate:number = 0.50) { 
   var discount = price * rate; 
   console.log("Discount Amount: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

在编译时，它将生成以下JavaScript代码-

//Generated by typescript 1.8.10
function calculate_discount(price, rate) {
   if (rate === void 0) { rate = 0.50; }
   var discount = price * rate;
   console.log("Discount Amount: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

其输出如下-

Discount amount : 500 
Discount amount : 300

  • 该示例声明了函数calculate_discount 。该函数具有两个参数-价格和费率。

  • 默认情况下，参数rate的值设置为0.50 。

  • 程序将调用该函数，仅将参数price的值传递给该函数。此处， rate的值为0.50 （默认值）

  • 调用相同的函数，但带有两个参数。 rate的默认值将被覆盖，并设置为显式传递的值。

匿名函数

未绑定到标识符（函数名称）的函数称为匿名函数。这些函数在运行时动态声明。就像标准函数一样，匿名函数可以接受输入和返回输出。匿名函数最初创建后通常无法访问。

可以为变量分配一个匿名函数。这样的表达式称为函数表达式。

句法

var res = function( [arguments] ) { ... }

示例─一个简单的匿名函数

var msg = function() { 
   return "hello world";  
} 
console.log(msg())

编译时，它将在JavaScript中生成相同的代码。

它将产生以下输出-

hello world

示例─带参数的匿名函数

var res = function(a:number,b:number) { 
   return a*b;  
}; 
console.log(res(12,2))

匿名函数返回传递给它的值的乘积。

在编译时，它将生成以下JavaScript代码-

//Generated by typescript 1.8.10
var res = function (a, b) {
   return a * b;
};
console.log(res(12, 2));

上面代码的输出如下-

24

函数表达式和函数声明─它们是同义词吗？

函数表达式和函数声明不是同义词。与函数表达式不同，函数声明由函数名称绑定。

两者之间的根本区别在于，函数声明是在执行之前进行解析的。另一方面，仅当脚本引擎在执行过程中遇到函数表达式时，才会对函数表达式进行解析。

当JavaScript解析器在主代码流中看到一个函数时，它将假定函数声明。当函数作为语句的一部分出现时，它就是函数表达式。

函数构造器

TypeScript还支持使用称为Function（）的内置JavaScript构造函数来定义函数。

句法

var res = new Function( [arguments] ) { ... }.

例

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

新的Function（）是对构造函数的调用，该构造函数继而创建并返回函数引用。

编译时，它将在JavaScript中生成相同的代码。

上面的示例代码的输出如下-

12

递归和TypeScript函数

递归是一种迭代操作的技术，方法是反复对自身进行函数调用，直到获得结果为止。当您需要在循环中使用不同的参数重复调用同一函数时，最好应用递归。

示例–递归

function factorial(number) {
   if (number <= 0) {         // termination case
      return 1; 
   } else {     
      return (number * factorial(number - 1));     // function invokes itself
   } 
}; 
console.log(factorial(6));      // outputs 720

编译时，它将在JavaScript中生成相同的代码。

这是它的输出-

720

示例：匿名递归函数

(function () { 
   var x = "Hello!!";   
   console.log(x)     
})()      // the function invokes itself using a pair of parentheses ()

编译时，它将在JavaScript中生成相同的代码。

其输出如下-

Hello!!

Lambda函数

Lambda是指编程中的匿名函数。 Lambda函数是表示匿名函数的简洁机制。这些功能也称为箭头功能。

Lambda函数-解剖

Lambda函数由3部分组成-

  • 参数-函数可以可选地具有参数

  • 粗箭头符号/ lambda符号（=>） -也称为gos运算符

  • 语句-表示函数的指令集

提示-按照惯例，鼓励使用单字母参数进行紧凑而精确的函数声明。

Lambda表达

它是一个匿名函数表达式，指向单个代码行。它的语法如下-

( [param1, parma2,…param n] )=>statement;

示例：Lambda表达式

var foo = (x:number)=>10 + x 
console.log(foo(100))      //outputs 110

该程序声明一个lambda表达式函数。该函数返回10与传递的参数之和。

编译时，它将生成以下JavaScript代码。

//Generated by typescript 1.8.10
var foo = function (x) { return 10 + x; };
console.log(foo(100));      //outputs 110

这是上面代码的输出-

110

Lambda声明

Lambda语句是指向代码块的匿名函数声明。函数主体跨越多行时使用此语法。它的语法如下-

( [param1, parma2,…param n] )=> {
 
   //code block
}

示例：Lambda语句

var foo = (x:number)=> {    
   x = 10 + x 
   console.log(x)  
} 
foo(100)

该函数的引用被返回并存储在变量foo中。

在编译时，它将生成以下JavaScript代码-

//Generated by typescript 1.8.10
var foo = function (x) {
   x = 10 + x;
   console.log(x);
};
foo(100);

上面程序的输出如下-

110

句法变化

参数类型推断

指定参数的数据类型不是强制性的。在这种情况下，参数的数据类型为任何。让我们看一下以下代码片段-

var func = (x)=> { 
   if(typeof x=="number") { 
      console.log(x+" is numeric") 
   } else if(typeof x=="string") { 
      console.log(x+" is a string") 
   }  
} 
func(12) 
func("Tom")

编译时，它将生成以下JavaScript代码-

//Generated by typescript 1.8.10
var func = function (x) {
   if (typeof x == "number") {
      console.log(x + " is numeric");
   } else if (typeof x == "string") {
      console.log(x + " is a string");
   }
};
func(12);
func("Tom");

其输出如下-

12 is numeric 
Tom is a string

单个参数的可选括号

var display = x=> { 
   console.log("The function got "+x) 
} 
display(12)

在编译时，它将生成以下JavaScript代码-

//Generated by typescript 1.8.10
var display = function (x) {
   console.log("The function got " + x);
};
display(12);

其输出如下-

The function got 12

单个语句的可选花括号，无参数的空括号

以下示例显示了这两种语法变体。

var disp =()=> { 
   console.log("Function invoked"); 
} 
disp();

在编译时，它将生成以下JavaScript代码-

//Generated by typescript 1.8.10
var disp = function () {
   console.log("Function invoked");
};
disp();

其输出如下-

Function invoked

函数重载

功能具有根据提供给它们的输入进行不同操作的能力。换句话说，一个程序可以有多个具有相同名称，具有不同实现的方法。这种机制称为功能重载。 TypeScript支持函数重载。

要重载TypeScript中的函数，您需要执行以下步骤-

步骤1-声明具有相同名称但函数签名不同的多个功能。功能签名包括以下内容。

  • 参数的数据类型

function disp(string):void; 
function disp(number):void;

  • 参数数量

function disp(n1:number):void; 
function disp(x:number,y:number):void;

  • 参数顺序

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

注意-函数签名不包括函数的返回类型。

步骤2-声明后必须是函数定义。如果过载期间参数类型不同，则应将参数类型设置为任何。此外，对于上述情况b ，您可以考虑在函数定义期间将一个或多个参数标记为可选。

步骤3-最后，您必须调用该函数以使其起作用。

例

现在让我们看一下以下示例代码-

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 

function disp(x:any,y?:any):void { 
   console.log(x); 
   console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

  • 前两行描述了函数重载声明。该函数有两个重载-

    • 接受单个字符串参数的函数。

    • 该函数分别接受数字类型和字符串的两个值。

  • 第三行定义函数。参数的数据类型设置为any 。此外，第二个参数在这里是可选的。

  • 重载函数由最后两个语句调用。

在编译时，它将生成以下JavaScript代码-

//Generated by typescript 1.8.10
function disp(x, y) {
   console.log(x);
   console.log(y);
}
disp("abc");
disp(1, "xyz");

上面的代码将产生以下输出-

abc 
1 
xyz