ES6新特性之箭头函数

箭头函数如果熟练后，再写javascript时会大量的使用到，因为它确实减少了代码量。使用起来还是比较简洁和方便的。我们先看一下普通的箭头函数示例

Let a=(e)=>{
  console.log("这是一个箭头函数带有一个参数："+e)
}
a("我是参数");

从上我们可以看到箭头函数一般使用在匿名函数当中，它不需要写function 直接使用这样的主体 ()=>{}就代表了一个匿名函数。它跟函数的特性基本保持一致，但也有稍许不同的地方，

箭头函数没有this

箭头函数没有this，如果使用this，this一般指向它的上一级,如果它的上级也没this那一般返回undefined。如果说的专业点就是箭头函数的this来自于它的作用域链，它会一层层往上查找。如果一直没找到就返回undefined。比如<script type="module">里将没有this，或则在vue3里的混合模式本身就没有this，所以箭头函数也没有this.

箭头函数可以不使用return赋值

假设我们现在要给变量a 赋值一个箭头函数，并且返回值1。代码如下

let a=()=>1

当然，我们还可以做一点计算

let nums=3
let a=()=>nums+1

如上，箭头函数可以省略return。

箭头函数没有arguments

一般的函数都有arguments，但是箭头函数是不存在arguments，大家可以通过以下代码自己看看效果

let a=()=> {
  console.log(arguments.length)
}

箭头函数其他类型的应用

$.Ajax({//应用与ajax
  url: "/",
  success:e=>{}
});

let a=[1,2,3,4,56]
let b=a.Map(v=>v+1) //应用与map()

箭头函数在带有一个参数的情况下，甚至可以把()直接省略掉，当然，这种方式在TypeScript不被允许必须使用()

箭头函数的缺点

虽然箭头函数能简洁语法，对于程序员也非常友好，但也是有缺点的，比如代码量很多以后箭头函数会增加阅读难度。给个小示例

let a=b=>3,c=6,d=()=>{a=b=>3},e=2||true

比如上面写起来是很简洁，但如果是别人阅读起来就需要自己去脑补了。不是那么的直观。如果上诉代码在长个几倍阅读起来就更难受了。