【前端每日基础】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();

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

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

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

相关文章

windows-386、windows-amd64、windows-arm64这三者有什么区别?

选择文件的版本出现下面问题: Architectures windows-386 :这些是针对 32 位 Windows 系统编译的。windows-amd64 :这些是针对具有 AMD 或 Intel x86-64 架构的 64 位 Windows 系统编译的。windows-arm64 :这些是针对具有 ARM 架…

Golang的内存关系

1.Page Golang的Page,在操作系统对虚拟内存管理的MMU定义的物理页有相似的定义,默认的Page为8KB 2.mSpan 多个连续的Page称之为是一个Span,其定义含义有操作系统的管理的页表相似 3.Size Class Size Class: 相当于 一个等级和刻度, 比如 第二等级 就代表 一个Pag…

从零开始打造教育APP:在线教育系统源码与开发流程

很多人疑问,应该如何从零开始打造一个在线教育APP?今天,小编将详细为大家讲解在线教育系统的源码与开发流程。 一、需求分析 对于在线教育APP,需要要明确以下几点: 1.目标用户:明确APP的用户群体&#xf…

代码随想录-Day21

530. 二叉搜索树的最小绝对差 给你一个二叉搜索树的根节点 root ,返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数,其数值等于两值之差的绝对值。 class Solution {int pre;int ans;public int getMinimumDifference(TreeNode root) {ans…

四川景源畅信:抖音小店新手如何做?

随着短视频平台的兴起,抖音小店成为了许多创业者的新选择。但是,对于新手来说,如何在抖音上开设并经营好自己的小店呢?本文将围绕这一问题展开讨论。 一、明确目标和定位作为抖音小店的新手,首先要明确自己的经营目标和定位。是想…

挑战你的数据结构技能:复习题来袭【3】

chap3 练习1 一. 单选题 1. (单选题)栈和队列具有相同的() A. 抽象数据类型B. 逻辑结构C. 存储结构D. 运算 答案: B:逻辑结构 答案分析:逻辑结构都属于线性结构,只是它们对数据的运算不同。 2. (单选题)栈是() A. 顺序存储的线性结构B…

el-input只能输入整数,小数、最多保留两位小数、最多输入4位小数,过滤el-input输入框中的特殊符号

只能输入框只能输入正整数&#xff0c;输入同时禁止了以0开始的数字输入&#xff0c;防止被转化为其他进制的数值。 <el-input v-model"programForm.ladderSectionUpperBound" input"(v)>(programForm.ladderSectionUpperBoundv.replace(/^(0)|[^\d]/g,)…

Android基础-SharedPreferences介绍

Android中SharedPreferences的功能和作用 SharedPreferences是Android平台上一个轻量级的存储类&#xff0c;用于存储应用程序的轻量级数据。其主要功能和作用体现在以下几个方面&#xff1a; 数据存储&#xff1a;SharedPreferences能够保存一组原始数据的名、值对&#xff…

如何处理逻辑设计中的时钟域

1.什么是时钟域 2.PLL对时钟域管理 不管是否需要变频变相&#xff0c;在FPGA内部将外部输入时钟从专用时钟引脚扇入后先做PLL处理。如何调用pll&#xff0c;见另一篇文章。 约束输入时钟 creat_clock -period 10 -waveform {0 5} [get_ports {sys_clk}] 3.单bit信号跨时钟…

黏土风格绘画神器Image to Clay Style Online,可免费生成50000张

&#x1f9d9;‍♂️ 诸位好&#xff0c;吾乃斜杠君&#xff0c;编程界之翘楚&#xff0c;代码之大师。算法如流水&#xff0c;逻辑如棋局。 &#x1f4dc; 吾之笔记&#xff0c;内含诸般技术之秘诀。吾欲以此笔记&#xff0c;传授编程之道&#xff0c;助汝解技术难题。 &#…

[pdf,epub]《软件方法》2024版电子书共290页(202405更新)

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 已上传本账号CSDN资源。 或者到以下链接下载&#xff1a; http://www.umlchina.com/url/softmeth2024.html&#xff0c;或点击“阅读原文”。 如果需要提取码&#xff1a;umlc 已排…

mysql高级篇学习(数据表的设计方法,索引优化)

使用docker 安装 mysql 安装 docker # yum 包更新到最新 yum update# 卸载旧的 docker yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine # 安装 gcc 环境 yum -y install…

库卡机器人保养服务包,教你保养技术

为了确保机器人的持续稳定运行和延长使用寿命&#xff0c;正确的库卡机器人保养和KUKA机械手维修至关重要。 KUKA机器人保养工作对于保障其稳定运行和延长使用寿命具有重要意义。通过了解子锐机器人提供的库卡机械手保养服务包&#xff0c;可以确保机器人在良好的状态下为生产线…

英语新概念2-回译法-lesson16

第一次回译 if you ___ your car on a wrong place, the traffic police man will find you quickly. If he do not give you the ticket,you are lucky.However,the ___ not all like this,The police man is __ sometimes.I had a holiday in Sweden, I found a ___ in my c…

深入探索:中文字符的编码与转移字符的奥秘

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;探索字符编码的世界 二、字符编码基础&#xff1a;理解ASCII与Unicode…

MPP架构

MPP架构&#xff0c;即Massively Parallel Processing&#xff08;大规模并行处理&#xff09;架构&#xff0c;是一种用于处理大规模数据的并行计算架构。它通过将数据和计算能力分布在多个处理节点上&#xff0c;利用并行处理技术来加速数据处理和分析的速度。 在MPP架构中&…

2023idea没有VCS首次提交代码到Git

1、setting 2、vcs------>create git repository 3、右键项目----->Git------>add 4、右键项目------>git------>commit Directory 之后就会显示这个页面(下面写你提交的信息&#xff0c;就是你修改了什么) 点击commit,提交 5、Git--------->push 6、选择…

红队攻防渗透技术实战流程:红队目标上线之Webshell免杀对抗

红队攻防免杀实战 1. 红队目标上线-Webshell免杀-基础准备2. 红队目标上线-Webshell免杀-基础内容3.红队目标上线-Webshell免杀-建立认知3.红队目标上线-Webshell免杀-测试实验3.1 查杀对象-Webshell&C2后门&工具&钓鱼3.2 免杀对象-Webshell&表面代码&行为…

IDEA出现javax.servlet.http包错误解决方法

问题原因&#xff1a;缺少对应的jar包&#xff0c;其实tomcat服务器自带与HTTP一些相关的Jar包&#xff0c;没有导入进去。 解决方案1&#xff1a; 导入对应jar包 <dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</…

推导点到直线(平面)的距离公式

本文利用了点和直线、平面的齐次坐标表示方法&#xff0c;来推导2维点到直线距离&#xff0c;3维点到平面距离的公式。用齐次坐标表示方法推导比较简洁。 2维点到直线 令2维点: A ( x 0 , y 0 , 1 ) (x_0,y_0, 1) (x0​,y0​,1), 2维直线方程: a x b y c 0 axbyc0 axbyc0…