《揭秘Angular 2》-Typescript 函数

拼搏现实的明天。 2022-06-04 09:39 218阅读 0赞

**《揭秘Angular 2》-Typescript 函数**

Typescript再Javascript函数的基础上添加了很多额外的功能，使函数变得更加易用。

*  **函数定义**

在typescript中支持函数声明和函数表达式的写法：

//函数声明：

function  maxA(x:number,y:number)\{

return x>y?x:y;

//函数表达式：

let maxB=function(x:number,ynumber)\{

return x>y?x:y;

*  **可选参数**

在typescript中所有的参数都是必传，在编译时会检查函数的每个参数是否传值，但是，也会遇到一些实际的需要来确定是否传值，typescript提供了可选参数的语法，在参数名旁边加上"?"

function max(x:number,y?:number):number { if(y){ return x>y?x:y; } else { return x; } } let result1=max(2);//运行正常 let result2=max(2,4,7);//报错 let result3=max(2,4);//运行正常

注：可选参数必须放在必选参数之后。

*  **默认参数**

typescript还支持初始化默认参数，如果没有传值，就使用默认参数，带默认值的参数需要放在必须放在必选参数之后。

function maxA(x:number,y=5):number\{

return x>y?x:y

let r1=maxA(2);//运行正常

let r2=maxA(2,6);//运行正常

let r2=maxA(2,6,7)//运行错误

*  **剩余参数**

当需要同时操作多个参数，或者并不知道会有躲闪参数传递进来时，就需要用到typescript里剩余参数

function sum(x:number,...restOfNumber:number\[\]):number \{  
    let result=x;  
    for(let i=0;i<restOfNumber.length;i++)\{  
        result+=restOfNumber\[i\];  
    \}  
    return result;   
\}  
let result=sum(1,2,3,4,5);  
console.log(result);//输出：15

*  **箭头函数**

用来声明匿名函数，消除传统匿名函数的this指针问题。

单行:

var sum2=(arg1,arg2)=>arg1+arg2;

多行:

var sum3=(arg1,arg2)=>\{

return arg1+arg2

无参数：

var sum4=()=>\{

一个参数：

var sum5=arg1=>\{

console.log(arg1)

//箭头函数(箭头函数中的this始终跟着这个函数定义时的this的指向走)
      var a={ aa:123, b:()=>{ console.log(this)//指向window return c={ cc:1234, d:()=>{ console.log(this)//指向window } }; } }; a.b().d();
    
    //普通函数  谁调用就指向谁（因为是a调用的b,所以b指向a,c调用的是d，所以d指向c）
     var a={ aa:123, b:function(){ console.log(this)//指向a return c={ cc:1234, d:function(){ console.log(this)//指向c } }; } }; a.b().d();

注：箭头函数，可以消除了this关键字  
在传统的ES5程序中，this会是一个比较大的问题，但是在typescript里箭头函数很好的解决了这个问题，它在创建的时候就绑定了this。

也不啰嗦了，就写这么多了，see you.....