【前端每日基础】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——箭头函数
箭头函数是ES6(ECMAScript 2015)引入的一种新的函数表达式语法。相比传统函数,箭头函数有简洁的语法,并且不绑定自己的this、arguments、super或new.target。以下是详细介绍箭头函数的各个方面: 基本语法 单参数箭头函…...
27.Java中单例模式的实现方式
一、单例模式 单例模式(Singleton Pattern)是一种创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点来访问这个唯一实例。 单例模式中: 这个类只能有一个实例这个类必须自己创建自己的唯一实例这个类必须…...
C#面:当一个线程进入一个对象的方法后,其它线程是否可以进入该对象的方法?
一个线程在访问一个对象的一个synchronized方法时: 另一个线程可以同时访问这个对象的非同步方法。另一个线程不可以同时访问这个对象的普通同步方法。另一个线程可以同时访问这个对象的静态同步方法 ,即static synchronized修饰的方法 。另一个线程不可…...
express框架下后端获取req.body报错undefined
express框架下后端获取req.body报错undefined_express服务器post中data为undefine-CSDN博客 /*** 特殊说明:Express是一个单线程服务器器程序【必须存在指定的顺序调用,否则无法达到预期的效果】*//*** 第一步:创建一个Express实例对象,并且在匹配路由之…...
Element plus 低版本弹窗组件添加拖拽功能
在使用element plus 弹窗组件el-dialog 的时候,由于自己组件库版本过低,所以就会缺失某些功能,比如弹窗组件的可拖拽功能。因为某些原因element plus 组件库又不能升级,所以此时就需要自己为弹窗组件添加拖拽功能。共分为一下四个…...
计算机组成原理易混淆知识点总结(持续更新)
目录 1.机器字长,存储字长与指令字长 2.指令周期,机器周期,时钟周期 3.CPI,IPS,MIPS 4.翻译程序和汇编程序 5.计算机体系结构和计算机组成的区别和联系 6.基准程序执行得越快说明机器的性能越好吗? 1.机器字长,存储字长与指令字长 不同的机器三者…...
【STM32踩坑】HAL固件库版本过高导致烧录后无法运行问题
问题引入 目前STM32CUBEMX已经更新到了6.11版本,对应的固件库也一直在更新; 以STM32F1库为例,目前最新的库对应版本为1.8.5 但是我们会发现,如果直接使用1.8.5版本的固件库生成HAL源码后,烧录是可以烧录,但…...
芯片丝印反查
芯片丝印反查网 - IC芯片丝印,IC芯片代码,IC芯片印字,IC芯片顶标,SMD code,marking code,top mark芯查查-电子信息产业数据引擎 ic/芯片丝印反查网-芯查查...
C语言之指针详解(5)(含有易错笔试题)
文章目录 一、sizeof和strlen的对比1.1 sizeof1.2 strlen1.3 sizeof 和 strlen 的对比 二、数组和指针笔试题2.1 一维数组2.2 字符数组2.3 二维数组 三、指针运算笔试题3.1 题目13.2 题目23.3 题目33.4 题目43.5 题目53.6 题目63.7 题目7 一、sizeof和strlen的对比 有一个很神…...
discuzX2.5的使用心得 札记一
从开始接受php论坛的开发任务,对php感兴趣的我开始迷恋上discuz这个产品了, 像戴志康这样的创新人才,是我们这代人的骄傲和学习的榜样 应该是了解一下,啥事discuzX2.5,百度看一下 discuz x2.5_百度百科 看完百度词条…...
【Python】 探索Django框架的高并发处理能力
基本原理 Django是一个高级的Python Web框架,它鼓励快速开发和干净、实用的设计。Django遵循MVC(模型-视图-控制器)设计模式,提供了一个全栈式的解决方案,使得开发者能够快速构建功能丰富的Web应用。Django的高并发处…...
C-数据结构-平横二叉树
平衡二叉树(Balanced Binary Tree)是一种二叉树,其中任意节点的两棵子树的高度差不超过 1。也可以说是一棵空树或者左右子树高度差不超过 1 的二叉树。 特点和性质 高度平衡:平衡二叉树是一种高度平衡的二叉树,任意节…...
算法训练营day41
动态规划理论基础(主要就是确定动态规划的几个步骤) 题目1:509. 斐波那契数 - 力扣(LeetCode) class Solution { public:int fib(int n) {if(n 0) return 0;if(n 1) return 1;int dp1 0;int dp2 1;int dp3 0;fo…...
cesium开发实例分享
反正 cesium 看到的效果几乎都有...
字符串和字符串函数(1)
前言: 字符串在C语言中比较特别,没有单另的字符串类型,想要初始化字符串必须用字符变量的数组初始化,但是在C语言标准库函数中提供了大量能对字符串进行修改的函数,比如说可以实现字符串的的拷贝,字符串的追…...
基于springboot+vue的班级综合测评管理系统
开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…...
蓝海项目揭秘:跨境选品师的崛起与挑战
随着全球化贸易的日益深入和电子商务的蓬勃发展,跨境选品师这一新兴职业逐渐走进人们的视野。跨境选品师,顾名思义,就是专门负责为跨境电商平台挑选和推荐适合海外市场的商品的专业人士。那么,跨境选品师这一职业能否被视为一个蓝…...
酷黑简洁大气体育直播自适应模板赛事直播门户网站源码
源码名称:酷黑简洁大气体育直播自适应模板赛事直播门户网站源码 开发环境:帝国cms 7.5 安装环境:phpmysql 支持PC与手机端同步生成html(多端同步生成插件) 带软件采集,可以挂着自动采集发布,无…...
2024年电工杯高校数学建模竞赛(B题) 建模解析| 大学生平衡膳食食谱的优化设计
问题重述及方法概述 问题1:膳食食谱的营养分析评价及调整 数学方法:线性规划模型、营养素评价模型、比较分析 可视化数据图:营养素含量表、营养素摄入量对比图、营养素缺乏情况图 问题2:基于附件3的日平衡膳食食谱的优化设计 数…...
学习编程对英语要求高吗?
学习编程并不一定需要高深的英语水平。我这里有一套编程入门教程,不仅包含了详细的视频讲解,项目实战。如果你渴望学习编程,不妨点个关注,给个评论222,私信22,我在后台发给你。 虽然一些编程资源和文档可能…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架:基于 (一个现代化的 React 节点绘图库) 功能: 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息:libc.so.6: cannot open shared object file: No such file or directory: #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里,Bessie 有一个烤箱,可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...
Qt的学习(一)
1.什么是Qt Qt特指用来进行桌面应用开发(电脑上写的程序)涉及到的一套技术Qt无法开发网页前端,也不能开发移动应用。 客户端开发的重要任务:编写和用户交互的界面。一般来说和用户交互的界面,有两种典型风格&…...
