【es6复习笔记】箭头函数(5)

embedded/2024/12/29 7:42:44/

简介

本教程将介绍如何在 JavaScript 中使用箭头函数,包括箭头函数的基本语法、特点以及在实际开发中的应用。通过本教程,你将学会如何使用箭头函数来简化代码,提高代码的可读性和简洁性。

箭头函数的基本语法

箭头函数是 ES6 引入的一种新的函数定义方式,它使用箭头 => 来定义函数箭头函数的基本语法如下:

javascript">(param1, param2,..., paramN) => {// 函数
}

参数

箭头函数可以接受任意数量的参数,参数之间使用逗号分隔。如果函数只有一个参数,则可以省略参数列表的括号。例如:

javascript">let add = n => {return n + n;
}

函数

箭头函数函数体可以是一个表达式,也可以是一个代码块。如果函数体是一个表达式,则可以省略花括号和 return 关键字,此时表达式的结果就是函数的返回值。例如:

javascript">let pow = n => n * n;

如果函数体是一个代码块,则需要使用花括号将代码块包围起来,并且需要使用 return 关键字来返回函数的结果。例如:

javascript">let add = (n, m) => {return n + m;
}

箭头函数的特点

1. this 是静态的

箭头函数this 是静态的,它始终指向函数声明时所在作用域下的 this 的值。这意味着箭头函数不会创建自己的 this 上下文,而是继承外层函数this。例如:

javascript">function getName() {console.log(this.name);
}let getName2 = () => {console.log(this.name);
}window.name = '尚硅谷';
const school = {name: "ATGUIGU"
}getName(); // 输出: 尚硅谷
getName2(); // 输出: 尚硅谷getName.call(school); // 输出: ATGUIGU
getName2.call(school); // 输出: 尚硅谷

2. 不能作为构造函数

箭头函数不能作为构造函数,因此不能使用 new 关键字来实例化对象。例如:

javascript">let Person = (name, age) => {this.name = name;this.age = age;
}let me = new Person('xiao', 30); // 报错: Person is not a constructor

3. 不能使用 arguments 变量

箭头函数内部没有自己的 arguments 对象,因此不能使用 arguments 变量。如果需要访问函数的参数,可以使用剩余参数 ... 来获取。例如:

javascript">let fn = () => {console.log(arguments); // 报错: arguments is not defined
}fn(1, 2, 3);

4. 箭头函数的简写

省略小括号

箭头函数只有一个参数时,可以省略参数列表的括号。例如:

javascript">let add = n => {return n + n;
}
省略花括号和 return 关键字

箭头函数函数体只有一条语句时,可以省略花括号和 return 关键字,此时语句的执行结果就是函数的返回值。例如:

javascript">let pow = n => n * n;

箭头函数的应用场景

箭头函数适用于以下场景:

  1. 回调函数箭头函数非常适合作为回调函数,特别是在事件处理、定时器和数组方法中。
  2. 简洁的函数表达式箭头函数可以使代码更加简洁,特别是在函数体很简单的情况下。
  3. 避免 this 指向问题:由于箭头函数this 是静态的,因此可以避免在回调函数中使用 this 时出现的指向问题。
let school = {name: '尚硅谷',getName() {let fn5 = () => {console.log(this); // 此处的this指向school对象}fn5();}
};
school.getName(); // 输出: 学校对象

箭头函数的注意事项

  1. 箭头函数没有自己的 this箭头函数this 是继承自外层函数的,因此在使用箭头函数时,需要注意 this 的指向。
  2. 箭头函数不能作为构造函数箭头函数不能使用 new 关键字来实例化对象。
  3. 箭头函数没有 arguments 对象箭头函数内部没有自己的 arguments 对象,因此不能使用 arguments 变量。
  4. 箭头函数的简写:在使用箭头函数的简写形式时,需要注意函数体的复杂性,避免代码过于晦涩难懂。

总结

箭头函数是 ES6 引入的一种新的函数定义方式,它具有简洁的语法和一些特殊的特性。箭头函数this 是静态的,它不会创建自己的 this 上下文,而是继承外层函数this箭头函数不能作为构造函数,也没有自己的 arguments 对象。在实际开发中,箭头函数适用于回调函数、简洁的函数表达式以及避免 this 指向问题的场景。在使用箭头函数时,需要注意其特点和注意事项,以确保代码的正确性和可读性。


http://www.ppmy.cn/embedded/148676.html

相关文章

加密货币地址的基本概念

什么是地址? 在日常生活中,地址可能指房屋、电子邮件或官网的位置,用来精确定位在系统中的特定位置或端点。在加密货币领域,地址也起着类似的基础作用,只不过是在数字环境中。 加密货币地址是区块链网络中使用的唯一…

Linux 环境下运行 .NET 8.0 core项目

在 Linux 环境下运行 .NET 8.0 项目,.NET 已支持跨平台运行,以下是完整的步骤: 1. 安装 .NET 8.0 SDK 或运行时 首先需要在 Linux 系统中安装 .NET 8.0 SDK 或运行时。 1.1 添加 Microsoft 包管理源 运行以下命令添加 Microsoft 包管理源并安…

微软在AI时代的战略布局和挑战

微软的CEO萨提亚纳德拉(Satya Nadella)在与投资人比尔格里(Bill Gurley)和布拉德格斯特纳(Brad Gerstner)的一场深度对话中,详细回顾了微软在AI时代的战略布局与所面临的挑战。这场对话不仅总结…

Apache Log4j漏洞复现

所用环境 宝塔云服务器 log4j2 是Apache的⼀个java日志框架,我们借助它进行日志相关操作管理,然而在2021年末log4j2爆出了远程代码执行漏洞,属于严重等级的漏洞。 apache log4j通过定义每⼀条日志信息的级别能够更加细致地控制日志⽣成地过…

centos日志管理,xiao整理

1.什么是日志,为什么要管理日志? 程序产生的文字类和数字类信息。为了统计信息,为了排查错误。 rsyslog是一个程序、是一个进程,有配置文件 2.日志从哪里来?哪些程序产生了日志? Linux系统中rsyslog程序。未来安装的大型程序 3.rsysl…

[前端]HTTP库Axios

一、Axios简介 Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js 环境。它是一个流行的 JavaScript 库,用于发起 HTTP 请求,如 GET、POST、DELETE 等。Axios 提供了易于使用的 API,支持请求和响应的拦截、转换数据格…

大功率LED基础学习笔记

大功率 LED 基础学习笔记 一、 LED发光原理 (1)传统白炽灯发光原理 大家从小听说爱迪生发明(改良)电灯,其白炽灯工作原理为:灯丝通电加热到白炽状态,利用热辐射发出可见光的电光源。由于发光…

【WebRTC】视频发送链路中类的简单分析(上)

目录 1.视频流发送(VideoSendStream) 1.1 质量限制(QualityLimitationReason)1.2 RTP配置项(RtpConfig)1.3 视频流编码器配置项(VideoStreamEncoderSettings)1.4 传输(T…