[ES6] 箭头函数

  JavaScript 是一种广泛使用的编程语言,随着其发展和演变,引入了很多新的特性来提高代码的可读性和开发效率。其中一个重要的特性就是 ES6(ECMAScript 2015)中引入的箭头函数(Arrow Function)。箭头函数不仅提供了更简洁的语法,还带来了一些独特的行为,尤其是在处理 this 关键字时。本文将详细讲解箭头函数的使用方法及其背后的机制。

1. 箭头函数的基本语法

箭头函数使用  “=>”  操作符定义,语法更简洁。以下是箭头函数与传统函数的对比:
传统函数表达式:

function add(a, b) {return a + b;
}

箭头函数表达式:
 

const add = (a, b) => a + b;

可以看出,箭头函数省略了 function 关键字,并且在单行返回值时省略了 return 关键字和大括号 {}。

2.参数个数

当箭头函数没有参数或只有一个参数时,语法也可以进一步简化。
没有参数:

const greet = () => console.log('Hello!');
greet(); // 打印出Hello!

单个参数:

const square = x => x * x;
console.log(square(5)); // 25

多个参数:

const multiply = (a, b, c) => a * b * c;
console.log(multiply(2, 3, 4)); // 24

多行语句:

const complexFunction = (a, b) => {const sum = a + b;return sum * 2;
}
console.log(complexFunction(2, 3)); // 10

当函数体内有多行语句时,需要用大括号 {} 包裹,并显式使用 return 语句来返回值;但若函数只有一个return语句时,直接在箭头右侧写生return语句中的内容即可。

3. 箭头函数中的 this 绑定

箭头函数与传统函数的一个显著区别在于 this 的绑定方式。箭头函数不会创建自己的 this,而是从定义时的上下文中继承 this。这在处理回调函数时尤为有用。
传统函数中的 this:

function Person() {this.age = 0;setInterval(function() {this.age++; // `this` 指向全局对象(在浏览器中是 window)console.log(this.age);}, 1000);
}const p = new Person();

箭头函数中的 this:

function Person() {this.age = 0;setInterval(() => {this.age++; // `this` 继承自 Person 对象console.log(this.age);}, 1000);
}const p = new Person();

在上述例子中,使用箭头函数后,this 绑定到 Person 实例,而不是全局对象。

4. 使用箭头函数的场景

箭头函数适用的场景整理如下:

1.简单的回调函数
2.数组方法(如 map、filter、reduce)的回调
3.保留 this 上下文的场景


数组方法:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(n => n * n);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

保留 this 上下文:

class Timer {constructor() {this.seconds = 0;setInterval(() => {this.seconds++;console.log(this.seconds);}, 1000);}
}const timer = new Timer();

5. 箭头函数的使用限制

1.箭头函数不能用作构造函数,不能使用 new 关键字。
2.箭头函数没有 arguments 对象,如果需要访问参数列表,可以使用剩余参数语法(...args)。
3.箭头函数没有 super 关键字,因此在类的扩展中应注意。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40407.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css---before和after伪元素

1.什么是伪元素 伪元素不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用如页面元素一样的CSS样式,表面上看上去貌似是页面的某些元素来展现,实际上CSS样式展现的行…

这样一位美丽的女子

在《生有热爱》这本书中看到这样一句话“斯人若彩虹,遇上方知有”,瞬间击中了我的灵魂,这句话完美的表达了我对爱人的情感。以前我总以为“遇上爱人是我这辈子最大的幸运”是我此生对爱人的完美表达,直到遇到这句话我才深刻体会到…

django models对应的mysql类型

Django模型字段类型与MySQL数据库类型的对应关系如下: Django 模型字段类型MySQL 数据库类型AutoFieldBIGINT UNSIGNEDCharFieldVARCHARIntegerFieldINTDecimalFieldDECIMALDateFieldDATEDateTimeFieldDATETIMEFileField, ImageFieldVARCHAR (用于文件路径)Boolean…

Python容器 之 字典--字典的遍历

字典存在 键(key), 值(value) , 遍历分为三种情况 1.遍历字典的键 循环拿到字典中的每个键名 # 方式一 for 变量 in 字典: print(变量) # 方式二 for 变量 in 字典.keys(): # 字典.keys() 可以获取字典所有的键 print(变量) my_dict {name: 小明, age: 18, sex: 男}…

Node.js的应用场景

Node.js具有广泛的应用场景,其基于Chrome V8引擎的JavaScript运行环境使得JavaScript能够运行在服务器端,极大地扩展了其应用范围。以下是Node.js的主要应用场景: 1. 服务器端开发 Web服务器和API服务器:Node.js非常适合构建服务…

Kamailio-Web管理页面Siremis的安装与部署

siremis 是针对于 Kamailio 的web管理接口,使用PHP书写,更新至2020年,相对不是太新但是是官方友链的 以下就采用 Ubuntu 22.04Siremis 5.8.0apache http server 2.4php7.0 如有疑问请参看官方指南 以下开始介绍操作步骤 安装apache2.4 we…

python转换其他分辨率的图片为固定分辨率的方法

**需求:**把其他分辨率转换成1920*960的分辨率,并保存下来 你可以使用Pillow库,这是一个非常流行的图像处理库。以下是一段示例代码,演示如何使用Pillow来调整图片的分辨率: from PIL import Imagedef resize_image(…

《艺术品交易导报》

《艺术品交易导报》 《艺术品交易导报》是由心海集团主管,北京心海文化艺术研究院主办的,鉴于国家的扶持政策和艺术品交易中心的崛起,为推动艺术品交易走向更加成熟和规范化道路而做的一份艺术品交易领域的专业报刊。在追求艺术品价值的同时…

学习一个新的知识点的五个状态

# 学习一个新的知识点的五个状态是: # 未知,接触,熟悉,模仿,创造。# 其中 接触 熟悉 模仿 是我们学习要经历的状态。 # 接触,主要是了解名称,有什么功能 # 熟悉,就是有功能如何使用…

【Qt项目学习--使用QTcpserver和libssh的区别】

很多Qt的教程都是基于QTcpServer实现的服务器客户端架构,而我想实现的用户名密码登陆,跟下来教程视频发现并没有实现,于是去了解libssh,实现IP地址登陆之后使用用户名密码实现。 libssh和QTcpServer之间的主要不同点:…

14-5 小语言模型SLM 百科全书

想象一下这样一个世界:智能助手不再驻留在云端,而是驻留在你的手机上,无缝理解你的需求并以闪电般的速度做出响应。这不是科幻小说;这是小型语言模型 (SLM) 的前景,这是一个快速发展的领域,有可能改变我们与…

MySQL数据库数据迁徙:从本地到Linux服务器

"男人的浪漫,绝对是拥有一台属于自己的服务器" MySQL数据库数据迁徙就两步:本地导出和服务器导入。 本地导出 本地导出的时候,需要注意你的CMD命令行必须是以管理员身份运行。如果你的计算机找不到mysqldump这个命令,…

移动端如何调试本地运行的前端项目

1.问题场景 本地通过Live Server开启服务,http://127.0.0.1:5500/html/test.html,调试移动端兼容性问题 2.解决办法 要在手机上访问电脑本地运行的服务http://127.0.0.1:5500/html/test.html,需要确保手机和电脑处于同一局域网内&#xff0…

Android手机拍照或从本地相册选取图片设置头像-高版本适配

GitHub传送门 问题点 Android 7.0 新增FileProvider 参考链接 图片裁减需要的临时权限 intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION);Android 10 只能读取自己APP目录下的文件 Unable to open /storage/emulated…

三、Prometheus监控Tidb

1.下载node_exporter https://download.pingcap.org/node_exporter-v1.3.1-linux-amd64.tar.gz将其配置为系统服务: vim /usr/lib/systemd/system/node_exporter.service[Unit] Descriptionnode_exporter Documentationhttps://prometheus.io [Service] ExecStart…

单片机软件架构连载(1)-枚举(enum)

今天跟大家讲一下我在产品开发时,用枚举(enum)的一些骚操作,都是实战经验,不难,但开发经验尚浅的话,不一定能把它灵活应用。 为什么要讲枚举呢? 因为我发现它是一个容易被遗忘,同时又非常重要的…

RK3568驱动指南|第十六篇 SPI-第195章 实践:移植官方mcp2515驱动

瑞芯微RK3568芯片是一款定位中高端的通用型SOC,采用22nm制程工艺,搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码,支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU,可用于轻量级人工…

顶顶通呼叫中心中间件(mod_cti基于FreeSWITCH)-http话术接口测试流程

文章目录 前言联系我们部署http话术PHP例子Java例子 登录ccadmin-web配置拨号方案创建与注册分机创建分机注册分机 测试 前言 用户一直想体验机器人话术的效果,但却找不到门路。本文提供了配置机器人话术接口的配置流程,供用户体验。用户可以根据本文的…

springboot交流论坛网站-计算机毕业设计源码00304

Springboot交流论坛网站 摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了交流论坛网站的开发全过程。通过分析交流论坛网站管理的不足,创建了一个计算机管理交流论坛网站的方案。文章介绍了交流论坛…

Excel 宏录制与VBA编程 ——VBA编程技巧篇三 (未初始化Range判断、遍历工作表方法、工作表多行重复内容剔除)

未初始化Range的判断 有时候需要对已定义未初始化的range对象做判断 dim curRange as range If curRange Is Nothing Thendebug.print("未初始化的..") End If遍历工作表方法 Chr(10):ASCII码中的换行键,相当于vbLF。 …