关于JS中的箭头函数

 更新时间:2023年05月09日 11:25:13   作者:JavaEdge.  
这篇文章主要介绍了关于JS中的箭头函数,ES6中允许使用=>来定义函数。箭头函数相当于匿名函数,并简化了函数定义,箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数,省去关键字function,需要的朋友可以参考下

更简短的函数并且不绑定this。

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。

箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

语法

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于:(param1, param2, …, paramN) =>{ return expression; }
// 当只有一个参数时,圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }
// 没有参数的函数应该写成一对圆括号。
() => { statements }

更短的函数

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
elements.map(function(element) {
  return element.length;
}); // 返回数组:[8, 6, 7, 9]
// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]
// 当箭头函数只有一个参数时,可以省略参数的圆括号
elements.map(element => {
 return element.length;
}); // [8, 6, 7, 9]
// 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]

在这个例子中,因为我们只需要 length 属性,所以可以使用参数解构。

需要注意的是字符串 "length" 是我们想要获得的属性的名称,而 lengthFooBArX 则只是个变量名,可以替换成任意合法的变量名

elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); 
// [8, 6, 7, 9]

到此这篇关于关于JS中的箭头函数的文章就介绍到这了,更多相关JS箭头函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 在 javascript 中如何快速获取数组指定位置的元素

    在 javascript 中如何快速获取数组指定位置的元素

    这篇文章主要介绍了在 javascript 中快速获取数组指定位置的元素,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • js实现从数组里随机获取元素

    js实现从数组里随机获取元素

    这篇文章主要介绍了js实现从数组里随机获取元素的方法,以及个人封装的js代码分享,十分的实用,这里推荐给小伙伴们
    2015-01-01
  • JS实现文件动态顺序载入的方法

    JS实现文件动态顺序载入的方法

    这篇文章主要介绍了JS实现文件动态顺序载入的方法,实例分析了基于Mootools框架实现动态载入的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 微信小程序实现简易加法计算器

    微信小程序实现简易加法计算器

    这篇文章主要为大家详细介绍了微信小程序加法计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • 很多人都是用下面的js刷新站IP和PV

    很多人都是用下面的js刷新站IP和PV

    有人用JS做网站跳转,也有人用很多其他作弊的方法,今天又发现有太多的人用这样的方法实现两个站的IP共享,把http://www.jb51.net替换成自己的站
    2008-09-09
  • JavaScript对象转数组的3种简单方法小结

    JavaScript对象转数组的3种简单方法小结

    在JavaScript中可以通过Object.keys()结合Array.map()、Object.entries()或Object.values()等方法将对象转换为数组,这些方法各有优势,可根据需要灵活选择,需要的朋友可以参考下
    2024-09-09
  • 继承行为在 ES5 与 ES6 中的区别详解

    继承行为在 ES5 与 ES6 中的区别详解

    这篇文章主要介绍了继承行为在 ES5 与 ES6 中的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 详谈JavaScript内存泄漏

    详谈JavaScript内存泄漏

    文章从什么是闭包、以及闭包所涉及的作用域链说起,讲述了JavaScript垃圾回收机制、循环引用、循环引用和闭包、IE中的内存泄漏以及解决方法,是篇非常详尽,非常不错的文章,这里推荐给大家。
    2014-11-11
  • uni-app 支持多端第三方地图定位的方法

    uni-app 支持多端第三方地图定位的方法

    这篇文章主要介绍了uni-app 支持多端第三方地图定位的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JavaScript中好用的解构用法详解

    JavaScript中好用的解构用法详解

    这篇文章主要为大家介绍了JavaScript中好用的解构用法操作示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05

最新评论