ES6新特性之箭头函数

发布时间：2025-09-21 00:56:02 阅读量： 0 来源： 互联网转载

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

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

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

箭头函数没有this

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

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

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

let a=()=>1

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

let nums=3let 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

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

ES6新特性合集 ES6新特性 Let Const Var的区别 ES6新特性解构赋值 ES6异步编程Promise对象全解析 ES6异步编程从Generator到Async/Await ES6新特性模块化Modules ES6新特性模板字符串Template String ES6新特性 Map的使用方法 ES6新特性之箭头函数 ES6新特性 map() filter() find()使用方法总结

上一篇: 百度改版数据动荡对新站冷漠的让人心寒

下一篇: 大连网站制作外链建设建议要的就是自然

ES6新特性之箭头函数

热门文章