TypeScript箭头函数（第3篇）

 TypeScript箭头函数（第3篇）

//不带参数的写法
let fun1 = ()=> 1;
let fun2 = ()=> 1+2;
let fun3 = ()=> {return 1+2;};
let fun4 = ()=> {let a = 1; return a+2;};
fun1() //就这么调用，如果要看值，需要console输出。例如： console.log(fun1()) 


//一个参数的写法（没有指定返回类型的时候，函数会自动推导）
//完整的写法. :(data:number) =>number  是函数类型
//let fun5 = (data:number)=> data * data;
let fun5:(data:number) =>number = (data:number)=> data * data;
let num5 = fun5(2);
console.log(num5);


let fun6 = (data:number)=> {return data*data};
let fun7 = (data:number)=> {data = data+1; return data};
//一个参数，指定了某个返回类型的写法
let fun8 = (data:number):number=> {data = data+1; return data};
fun5(666)  //就这么调用


//两个参数的写法（没有指定返回类型的时候，函数会自动推导）
let fun9 = (data1:number, data2:number)=> data1+data2;
let fun10 = (data1:number, data2:number)=> {return data1>data2};
let fun11 = (data1:number, data2:number)=> {data1 += data2 ; return data1};
let fun12 = (data1:number, data2:number):boolean=> {return data1>data2};
let fun13 = (data1:number, data2:number):boolean=> data1>data2;
fun9(12,13) // 就这么调用


//嵌套. (data3:number, data4:number)=>{return data3>data4}是匿名函数，用()扩起来，作为函数赋值给fun14
let fun14 = (data1:number, data2:number)=> ((data3:number, data4:number)=>{return data1+data2+data3+data4});
let ab = fun14(1,2);
console.log(ab(3,4));
console.log(fun14(1,2)(3,4));

//如果箭头函数的函数体只有一句代码，就是返回一个对象，可以像下面这样写：
// 用小括号包裹要返回的对象，不报错
let getTempItem1 = (id:number) => ({ id: id, name: "Temp" });


let getTempItem2 = (id:number) => { idd: id};

// 但绝不能这样写，会报错。
// 因为对象的大括号会被解释为函数体的大括号
let getTempItem3 = (id:number) => { idd: id, name: "Temp" };

箭头函数最常见的用处就是简化回调函数。

// 例子一
// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

// 例子二
// 正常函数写法
var result = [2, 5, 1, 4, 3].sort(function (a, b) {
  return a - b;
});

// 箭头函数写法
var result = [2, 5, 1, 4, 3].sort((a, b) => a - b);

数组类型的完整定义

let arr1:number[] = [1,2,3];
arr1.push(5);
let arr2:Array<number> = [1,3,5, 7];
arr2.push(9);
// 数组中允许出现任意类型的值
let arr4: any[] = [1, '2', new Date(), 3];

console.log(arr1);
console.log(arr2);

this指针的范围

let demo = {
    name: 'Demo',
    show: function() {
        console.log(this);
        return ()=> {
            console.log(this.name);
        }
    }
}
let d = demo.show();
d();//Demo

const obj = { name: '张三'} 
 function fn () { 
     console.log(this);//this 指向 是obj对象
     return () => { 
         console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
     } 
 } 
 const resFn = fn.call(obj); 
 resFn();