TypeScript 函数

2019-06-21 15:06 更新

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

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

序号 函数和说明
1 定义一个函数

函数定义指定将执行的任务和执行方式。

2 调用一个函数

必须调用函数才能执行它。

3 返回函数

函数也可以将值与控制一起返回给调用者。

4 参数化函数

参数是一种将值传递给函数的机制。

1、定义函数

函数定义指定将执行的任务和执行方式。使用函数之前,必须先定义它。使用function关键字定义函数。用于定义标准函数的语法如下:

语法

function  function_name() { 
   // function body 
}
示例:简单的函数定义
function () {   
   //function definition 
   console.log("function called") 
}

2、调用一个函数

必须调用函数才能执行它。此过程称为函数调用

语法
Function_name()

下面的例子说明一个函数如何被调用

示例

function test() {   // function definition    
   console.log("function called") 
} 
test()              // function invocation

在编译时,它会产生相同的JavaScript代码:

function test() { 
   console.log("function called"); 
} 
test();    // function invocation

它会产生以下的输出:

function called

3、返回函数

函数也可以将值与控件一起返回给调用者。这些函数称为返回函数。

语法

function function_name():return_type { 
   //statements 
   return value; 
}
  • return_type可以是任何有效的数据类型。

  • 返回函数必须用一个return语句结束。

  • 函数最多可以返回一个值。换句话说,每个函数只能有一个return语句。

  • 返回值的数据类型必须与函数的返回类型匹配。

示例
//function defined 
function greet():string { //the function returns a string 
   return "Hello World" 
} 

function caller() { 
   var msg = greet() //function greet() invoked 
   console.log(msg) 
} 

//invoke function 
caller()
  • 本示例声明了一个函数greet()。该函数的返回类型为string。

  • 行函数返回一个string值给调用者。这是通过return语句来实现的。

  • 函数greet()返回一个string,该string存储在变量msg中。稍后显示为输出。

在编译时,它会生成以下JavaScript代码:

//Generated by typescript 1.8.10
//function defined
function greet() {
   return "Hello World";
}
function caller() {
   var msg = greet(); //function greet() invoked
   console.log(msg);
}
//invoke function
caller();

上面的代码的输出如下:

Hello World

4、参数化函数

参数是一种将值传递给函数的机制。参数构成函数签名的一部分。参数值在调用期间传递给函数。除非明确指定,否则传递给函数的值的数量必须与定义的参数的数量相匹配。

在调用函数时,有两种方法可以将参数传递给函数:

序号 调用类型和说明
1

按值调用

此方法将参数的实际值复制到函数的形式参数中。在这种情况下,对函数内部参数所做的更改不会对参数产生影响。

2

通过指针调用

此方法将一个参数的地址复制到形式参数中。在函数内部,该地址用于访问调用中使用的实际参数。这意味着对参数进行了更改。

以下是函数使用参数的方式:

位置参数

function func_name( param1 [:datatype], ( param2 [:datatype]) {   
}
示例:位置参数
function test_param(n1:number,s1:string) { 
   console.log(n1) 
   console.log(s1) 
} 
test_param(123,"this is a string")
  • 该代码片段声明了一个带有三个参数的函数test_param,即n1,s1和p1。

  • 不必指定参数的数据类型。在没有数据类型的情况下,该参数被认为是any类型。在上面的示例中,第三个参数将是any类型

  • 传递的值的数据类型必须与其声明期间的参数类型匹配。如果数据类型不匹配,编译器将抛出错误。

在编译时,它会生成以下JavaScript代码:

//Generated by typescript 1.8.10
function test_param(n1, s1) {
   console.log(n1);
   console.log(s1);
}
test_param(123, "this is a string");

上面的代码的输出如下:

123 
this is a string

可选参数

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

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

rest参数

rest参数类似于Java的变量参数。rest参数不限制可以传递给函数的值的数目。但是,传递的值必须都是相同的类型。换句话说,rest参数充当相同类型的多个参数的占位符。

要声明一个rest参数,参数名称前缀为三个句点。任何nonrest参数都应该在rest参数之前。

示例:rest参数
function addNumbers(...nums:number[]) {  
   var i;   
   var sum:number = 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)
  • 函数的addNumbers()声明,接受一个rest参数nums必须将rest参数的数据类型设置为数组。此外,一个函数最多只能有一个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。该函数有两个参数 - price和rate。

  • 参数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解析器在主代码流中看到一个函数时,它会假定函数声明。当函数作为语句的一部分出现时,它是一个函数表达式。

Function构造函数

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函数是表示匿名函数的一个简洁的机制。这些函数也被称为Arrow函数

Lambda函数 - 解析

Lambda函数有3个部分:

  • 参数 - 一个函数可以选择性的带有参数

  • 箭头符号/lambda符号(=>) - 它也被称为作为转到运算符

  • 声明 - 表示函数的指令集

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

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

语法变化

参数类型推论

不必指定参数的数据类型。在这种情况下,参数的数据类型是any。让我们来看看下面的代码片段:

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步 - 该声明必须后跟函数定义。如果参数类型在重载过程中不同,则参数类型应设置为any 。此外, 如上所述的第二种情况,你可以考虑在函数定义期间将一个或多个参数标记为可选。

第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");
  • 前两行描述了函数重载声明。该函数有两个重载 -

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

    • 接受两个类型为number和string的值的函数。

  • 第三行定义了函数。参数的数据类型被设置为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 
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号