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();