TypeScript箭头函数（第3篇）

宽天下 發表於 2020-4-18 14:04:00

<div class="cnblogs_code">
 TypeScript箭头函数（第3篇）
</div>
 
 
<div class="cnblogs_code">
<pre>//不带参数的写法
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));</pre>
</div>
 
<div class="cnblogs_code">
<pre>//如果箭头函数的函数体只有一句代码，就是返回一个对象，可以像下面这样写：
// 用小括号包裹要返回的对象，不报错
let getTempItem1 = (id:number) => ({ id: id, name: "Temp" });

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

// 但绝不能这样写，会报错。
// 因为对象的大括号会被解释为函数体的大括号
let getTempItem3 = (id:number) => { idd: id, name: "Temp" };</pre>
</div>
 
箭头函数最常见的用处就是简化回调函数。
<div class="cnblogs_code">
<pre>// 例子一
// 正常函数写法
.map(function (x) {
return x * x;
});

// 箭头函数写法
.map(x => x * x);

// 例子二
// 正常函数写法
var result = .sort(function (a, b) {
return a - b;
});

// 箭头函数写法
var result = .sort((a, b) => a - b);</pre>
</div>
 
 
 
 
数组类型的完整定义
<div class="cnblogs_code">
<pre>let arr1:number[] = ;
arr1.push(5);
let arr2:Array<number> = ;
arr2.push(9);
// 数组中允许出现任意类型的值
let arr4: any[] = ;

console.log(arr1);
console.log(arr2);</pre>
</div>
 
this指针的范围
<div class="cnblogs_code">
<pre>let demo = {
name: 'Demo',
show: function() {
 console.log(this);
 return ()=> {
 console.log(this.name);
 }
}
}
let d = demo.show();
d();//Demo</pre>
</div>
 
<div class="cnblogs_code">
<pre>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();</pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
 
 
<div id="AllanboltSignature">
 <div>作者：小乌龟</div>
 <div>出处：http://www.cnblogs.com/music-liang/</div>
 <div> 【转载请注明出处，欢迎转载】希望这篇文章能帮到你 </div>
</div>
 
来源：https://www.cnblogs.com/music-liang/p/12725681.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript箭头函数（第3篇）