返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于JS中的箭头函数
  • 411
分享到

关于JS中的箭头函数

JS 函数箭头函数 2023-05-19 11:05:19 411人浏览 安东尼
摘要

更简短的函数并且不绑定this。 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。 箭头函数表达式更适用于那些本

更简短的函数并且不绑定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箭头函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 关于JS中的箭头函数

本文链接: https://lsjlt.com/news/213153.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 关于JS中的箭头函数
    更简短的函数并且不绑定this。 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。 箭头函数表达式更适用于那些本...
    99+
    2023-05-19
    JS 函数 箭头函数
  • 关于ES6中的箭头函数超详细梳理
    目录一、箭头函数的介绍1.1 什么是箭头函数1.2 基本语法1.3 箭头函数的参数1.4 箭头函数的函数体二、箭头函数的this指向规则三、箭头函数的arguments规则3.1 箭...
    99+
    2022-11-13
    es6箭头函数详解 es6箭头函数作用 es6 箭头
  • JS箭头函数的this指向分析
    本篇内容介绍了“JS箭头函数的this指向分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!箭头函数是ES6中的新增特性,他没有自己的thi...
    99+
    2023-06-25
  • JS 箭头函数的this指向详解
    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承。 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 ...
    99+
    2024-04-02
  • 箭头函数是不是属于es6
    今天小编给大家分享一下箭头函数是不是属于es6的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。箭头函数属于es6。箭头函数是E...
    99+
    2023-07-05
  • 一文带你了解JS箭头函数
    【推荐学习:javascript视频教程】以上就是一文带你了解JS箭头函数的详细内容,更多请关注编程网其它相关文章!...
    99+
    2022-11-22
    javascript 箭头函数
  • PHP:箭头函数
    PHP:箭头函数 箭头函数是 PHP 7.4 的新语法,是一种更简洁的 匿名函数 写法。 匿名函数和箭头函数都是 Closure 类的实现。 箭头函数的基本语法为 fn (argumen...
    99+
    2023-10-28
    php 开发语言
  • JS函数(普通函数,箭头函数)中this的指向问题详解
    目录普通函数箭头函数普通函数 具名普通函数、匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window )。...
    99+
    2024-04-02
  • js中什么时候不能使用箭头函数
    目录箭头函数箭头函数有什么缺点?什么时候不能使用箭头函数?1. 对象方法中,不适用箭头函数为什么对象方法中,箭头函数的this指向不是这个对象?2. 原型方法中,不适用箭头函数3. ...
    99+
    2024-04-02
  • JS什么场景不适合箭头函数
    目录概述定义对象上的方法Object literalObject prototype动态上下文的回调函数调用构造函数简写语法总结概述 这些年来,ES6 将js的可用性提升到一个新的水...
    99+
    2024-04-02
  • js中不能使用箭头函数的情况是什么
    这篇文章主要介绍“js中不能使用箭头函数的情况是什么”,在日常操作中,相信很多人在js中不能使用箭头函数的情况是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js中不能使用箭头函数的情况是什么”的疑惑有所...
    99+
    2023-07-02
  • JavaScript中的箭头函数是什么
    这篇文章主要讲解了“JavaScript中的箭头函数是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的箭头函数是什么”吧!一、箭头...
    99+
    2024-04-02
  • 最新版JavaScript中的箭头函数
    目录前言箭头函数语法无圆括号语法隐式返回注意隐式返回错误无法命名箭头函数如何处理this关键字匿名箭头函数不正常工作的情况箭头函数作为对象方法箭头函数与第三方库箭头函数没有argum...
    99+
    2022-11-13
    js箭头函数 JavaScript中的箭头函数
  • ES5中箭头函数是什么
    这篇文章主要介绍了ES5中箭头函数是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。什么是箭头函数?箭头函数表达式的语法比函数表达式更简洁...
    99+
    2024-04-02
  • ES6中箭头函数是什么
    这篇文章主要介绍ES6中箭头函数是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!箭头函数ES6新增了使用箭头语法定义语法函数表达式的能力。很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是...
    99+
    2023-06-14
  • JavaScript中箭头函数的简写方法
    这篇文章将为大家详细讲解有关JavaScript中箭头函数的简写方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。箭头函数简写传统函数编写方法很容易让人理解和编写,但是当嵌套在另一个函数中,则这些优势就荡...
    99+
    2023-06-27
  • JS中不应该使用箭头函数的四种情况详解
    目录箭头函数的一些缺点1、不支持参数对象2、无法通过apply、call、bind来改变this指针什么时候不能使用箭头功能1、请不要在构造函数中使用箭头函数2、请不要在点击事件中操...
    99+
    2024-04-02
  • 详解JavaScript中的箭头函数的使用
    目录前言箭头函数语法无圆括号语法隐式返回注意隐式返回错误无法命名箭头函数如何处理this关键字匿名箭头函数不正常工作的情况箭头函数作为对象方法箭头函数与第三方库箭头函数没有argum...
    99+
    2022-11-13
    JavaScript箭头函数使用 JavaScript 箭头函数 JS 箭头函数
  • JS箭头函数的语法是什么及怎么使用
    本篇内容介绍了“JS箭头函数的语法是什么及怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!JavaScript的箭头函数随着ECMAS...
    99+
    2023-07-04
  • Javascript箭头函数中this的示例分析
    小编给大家分享一下Javascript箭头函数中this的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!首先我们先看一段...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作