【前端每日基础】day23——箭头函数

2024-05-28 01:20

本文主要是介绍【前端每日基础】day23——箭头函数,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

箭头函数是ES6(ECMAScript 2015)引入的一种新的函数表达式语法。相比传统函数,箭头函数有简洁的语法,并且不绑定自己的this、arguments、super或new.target。以下是详细介绍箭头函数的各个方面:

基本语法
单参数箭头函数
如果箭头函数只有一个参数,可以省略参数周围的括号:

// 传统函数
let greet = function(name) {return "Hello, " + name;
};// 箭头函数
let greet = name => {return "Hello, " + name;
};

多参数箭头函数
如果箭头函数有多个参数,需要使用括号将参数括起来:

let sum = (a, b) => {return a + b;
};

无参数箭头函数
如果箭头函数没有参数,仍然需要使用空括号:

let sayHello = () => {return "Hello!";
};

简写形式
如果箭头函数的函数体只有一条语句,并且是返回值,则可以省略大括号和return关键字:

// 带大括号和return的写法
let square = x => {return x * x;
};
// 简写形式
let square = x => x * x;

this绑定
箭头函数最显著的特点之一是它不会创建自己的this上下文,而是从其外层上下文中继承this。这使得在某些场景下使用箭头函数更为方便,尤其是在需要保留外层this的情况下。

传统函数中的this问题

function Person() {this.age = 0;setInterval(function growUp() {this.age++; // 这里的this指向的是全局对象(或undefined,取决于是否在严格模式下)}, 1000);
}let p = new Person();

箭头函数中的this绑定

function Person() {this.age = 0;setInterval(() => {this.age++; // 这里的this指向的是Person实例}, 1000);
}let p = new Person();

其他特性
不绑定arguments对象
箭头函数不绑定arguments对象,但可以使用rest参数语法代替:

let traditionalFunction = function() {console.log(arguments); // 类数组对象,包含所有参数
};
traditionalFunction(1, 2, 3); // 输出[1, 2, 3]let arrowFunction = (...args) => {console.log(args); // 数组,包含所有参数
};
arrowFunction(1, 2, 3); // 输出[1, 2, 3]

不能作为构造函数
箭头函数不能用作构造函数,使用new关键字调用箭头函数会抛出错误:

let Foo = () => {};
let foo = new Foo(); // TypeError: Foo is not a constructor

没有prototype属性
由于箭头函数不能用作构造函数,它们也没有prototype属性:

javascript
复制代码

let Foo = () => {};
console.log(Foo.prototype); // 输出undefined

使用场景
简化回调函数:箭头函数在编写简短的回调函数时特别有用。

javascript
复制代码

// 传统回调函数
[1, 2, 3].map(function(x) {return x * x;
});

// 箭头函数

[1, 2, 3].map(x => x * x);

保持this的上下文:在需要访问外层this的情况下,箭头函数非常适合。

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

简洁的函数表达式:当需要简洁的函数表达式时,箭头函数提供了更为简便的语法。

这篇关于【前端每日基础】day23——箭头函数的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1009141

相关文章

RedHat运维-Linux文本操作基础-AWK进阶

你不用整理,跟着敲一遍,有个印象,然后把它保存到本地,以后要用再去看,如果有了新东西,你自个再添加。这是我参考牛客上的shell编程专项题,只不过换成了问答的方式而已。不用背,就算是我自己亲自敲,我现在好多也记不住。 1. 输出nowcoder.txt文件第5行的内容 2. 输出nowcoder.txt文件第6行的内容 3. 输出nowcoder.txt文件第7行的内容 4. 输出nowcode

Vim使用基础篇

本文内容大部分来自 vimtutor,自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下,然后再分别介绍正常模式,插入模式,和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式(Normal模式) 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT

零基础STM32单片机编程入门(一)初识STM32单片机

文章目录 一.概要二.单片机型号命名规则三.STM32F103系统架构四.STM32F103C8T6单片机启动流程五.STM32F103C8T6单片机主要外设资源六.编程过程中芯片数据手册的作用1.单片机外设资源情况2.STM32单片机内部框图3.STM32单片机管脚图4.STM32单片机每个管脚可配功能5.单片机功耗数据6.FALSH编程时间,擦写次数7.I/O高低电平电压表格8.外设接口

vue, 左右布局宽,可拖动改变

1:建立一个draggableMixin.js  混入的方式使用 2:代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr

【操作系统】信号Signal超详解|捕捉函数

🔥博客主页: 我要成为C++领域大神🎥系列专栏:【C++核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞👍收藏⭐评论✍️ 本博客致力于知识分享,与更多的人进行学习交流 ​ 如何触发信号 信号是Linux下的经典技术,一般操作系统利用信号杀死违规进程,典型进程干预手段,信号除了杀死进程外也可以挂起进程 kill -l 查看系统支持的信号

ps基础入门

1.基础      1.1新建文件      1.2创建指定形状      1.4移动工具          1.41移动画布中的任意元素          1.42移动画布          1.43修改画布大小          1.44修改图像大小      1.5框选工具      1.6矩形工具      1.7图层          1.71图层颜色修改          1

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档:https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址:https://github.com/Hufe921/canvas-editor 前提声明: 由于CanvasEditor目前不支持vue、react 等框架开箱即用版,所以需要我们去Git下载源码,拿到其中两个主

java中查看函数运行时间和cpu运行时间

android开发调查性能问题中有一个现象,函数的运行时间远低于cpu执行时间,因为函数运行期间线程可能包含等待操作。native层可以查看实际的cpu执行时间和函数执行时间。在java中如何实现? 借助AI得到了答案 import java.lang.management.ManagementFactory;import java.lang.management.Threa

React+TS前台项目实战(十七)-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装,可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 (1)通过position属性,可以控制下拉选项的位置 (2)通过传入width属性, 可以自定义下拉选项的宽度 (3)通过传入classN

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con