当前位置: 首页 > news >正文

JavaScript箭头函数介绍(=>)(箭头函数不绑定自己的this,而是继承上下文的this;不能用于造函数)JavaScript =>

文章目录

  • JavaScript箭头函数全解析
    • 箭头函数的基本语法
    • 简洁语法特性
      • 隐式返回值
      • 对象字面量返回
    • 词法绑定的this
    • 不适用箭头函数的场景
      • 对象方法
      • 构造函数
      • DOM事件处理
    • 高级用法
      • 在数组方法中的应用
      • 链式调用
      • 柯里化函数
    • 性能考量
      • 1. 作为回调函数时减少创建闭包的开销
      • 2. 简化代码结构,提高可读性和维护性
      • 3. 在高阶函数中减少冗余代码
    • 实战应用案例
      • React组件中的事件处理
      • 异步编程简化
    • 总结

JavaScript箭头函数全解析

箭头函数的基本语法

箭头函数是ES6引入的一种函数声明方式,使用=>符号定义:

// 基本语法
const func = (参数) => { 函数体 };// 单参数可省略括号
const square = x => x * x;// 无参数需要空括号
const sayHello = () => "Hello World";// 多参数必须使用括号
const add = (a, b) => a + b;

简洁语法特性

隐式返回值

当函数体只有一个表达式时,可省略花括号和return关键字:

// 传统函数
function double(x) {return x * 2;
}// 箭头函数
const double = x => x * 2;

对象字面量返回

返回对象字面量时需要用圆括号包裹:

const createPerson = (name, age) => ({ name, age });

词法绑定的this

箭头函数最大的特点是不绑定自己的this,而是继承上下文的this

const counter = {count: 0,// 传统函数incrementTraditional: function() {setTimeout(function() {console.log(this.count++); // this指向window,结果为NaN}, 1000);},// 箭头函数incrementArrow: function() {setTimeout(() => {console.log(this.count++); // this指向counter对象,正确增加count}, 1000);}
};

不适用箭头函数的场景

对象方法

// 错误用法
const person = {name: '张三',sayHi: () => {console.log(`你好,我是${this.name}`); // this指向外部作用域}
};// 正确用法
const person = {name: '张三',sayHi() {console.log(`你好,我是${this.name}`);}
};

构造函数

箭头函数不能用作构造函数,没有自己的this,也没有prototype属性:

const Person = (name) => {this.name = name; // 错误,this不指向新创建的对象
};

DOM事件处理

// 错误:this不指向按钮元素
button.addEventListener('click', () => {this.classList.toggle('active');
});// 正确
button.addEventListener('click', function() {this.classList.toggle('active');
});

高级用法

在数组方法中的应用

const numbers = [1, 2, 3, 4, 5];// map
const doubled = numbers.map(n => n * 2);// filter
const evens = numbers.filter(n => n % 2 === 0);// reduce
const sum = numbers.reduce((acc, n) => acc + n, 0);

链式调用

const result = [1, 2, 3, 4, 5].filter(n => n % 2 === 0).map(n => n * 2).reduce((acc, n) => acc + n, 0);

柯里化函数

const curry = fn => a => b => fn(a, b);
const add = (a, b) => a + b;
const curriedAdd = curry(add);
const add5 = curriedAdd(5);
const result = add5(3); // 8

性能考量

箭头函数在某些场景下可提高性能:

1. 作为回调函数时减少创建闭包的开销

2. 简化代码结构,提高可读性和维护性

3. 在高阶函数中减少冗余代码

实战应用案例

React组件中的事件处理

class Counter extends React.Component {state = { count: 0 };// 使用箭头函数自动绑定thisincrement = () => {this.setState({ count: this.state.count + 1 });}render() {return (<button onClick={this.increment}>点击次数: {this.state.count}</button>);}
}

异步编程简化

// Promise链
fetchData().then(data => processData(data)).then(result => displayResult(result)).catch(error => handleError(error));// Async/await与箭头函数结合
const loadData = async () => {try {const data = await fetchData();const result = await processData(data);return displayResult(result);} catch (error) {handleError(error);}
};

总结

箭头函数带来了更简洁的语法和词法绑定的this,使JavaScript代码更加简洁优雅。但需要注意其使用场景的限制,合理选择传统函数和箭头函数,才能发挥各自的优势。

相关文章:

JavaScript箭头函数介绍(=>)(箭头函数不绑定自己的this,而是继承上下文的this;不能用于造函数)JavaScript =>

文章目录 JavaScript箭头函数全解析箭头函数的基本语法简洁语法特性隐式返回值对象字面量返回 词法绑定的this不适用箭头函数的场景对象方法构造函数DOM事件处理 高级用法在数组方法中的应用链式调用柯里化函数 性能考量1. 作为回调函数时减少创建闭包的开销2. 简化代码结构&am…...

数据对象:DTO、DO、PO和 BO的区别和关系

在Java开发中&#xff0c;DTO&#xff08;Data Transfer Object&#xff09;、DO&#xff08;Domain Object&#xff09;、PO&#xff08;Persistent Object&#xff09;和BO&#xff08;Business Object&#xff09;是常用的数据对象概念&#xff0c;下面为你详细介绍并给出简…...

Java内存模型详解:堆、栈、方法区

1. 堆&#xff08;Heap&#xff09; 作用&#xff1a;存放所有对象实例及数组&#xff0c;是垃圾回收的主要区域。 结构&#xff1a; 新生代&#xff08;Young Generation&#xff09;&#xff1a; Eden区&#xff1a;新创建的对象首先分配在此。 Survivor区&#xff08;From…...

ubuntu 20.04 编译运行LeGo_LOAM 跑数据集 并且保存pcl文件

1.搭建文件目录,clone代码,编译 mkdir -p Lego_LOAM/src cd Lego_LOAM/src git clone https://github.com/RobustFieldAutonomyLab/LeGO-LOAM.git cd .. catkin_make -j1 错误1&#xff1a;: fatal error: opencv/cv.h: 没有那个文件或目录 13 | #include <opencv/cv.h…...

CMake使用教程

CMake是开源、跨平台的构建工具,可以让我们通过编写简单的配置文件去生成本地的Makefile,这个配置文件是独立于运行平台和编译器的,这样就不用亲自去编写Makefile了,而且配置文件可以直接拿到其它平台上使用,无需修改,非常方便。 使用命令行执行CMakeLists.txt,对文件进…...

快速上手Linux进程管理

一.理解进程和线程 1.1 什么是进程 它表示一个正在执行的程序实例。在操作系统中&#xff0c;进程是系统进行资源分配和调度的基本单位。每个进程都有自己独立的内存空间、代码、数据和系统资源&#xff0c;如打开的文件、使用的硬件设备等。 进程的主要特点包括&#xff1a…...

pytorch框架实现cnn四种天气图片多分类问题-添加dropout和bn层

目录 1.导包 2.加载数据、拼接训练、测试文件夹 3. 查看当前目录下的所有文件名,以列表的形式输出 4.原数据集dataset中存在的数据的目标类别 5.创建train和test目录 及其需要分类的子文件夹 6.使用torchvision 的transforms进行数据预处理 6.1数据统一缩放resize、To…...

swift-11-init、deinit、可选链、协议、元类型

一、required 二、属性观察器 三、可失败初始化器 可以用init!定义隐式解包的可失败初始化器 可失败初始化器可以调用非可失败初始化器&#xff0c;非可失败初始化器调用可失败初始化器需要进行解包 如果初始化器调用一个可失败初始化器导致初始化失败 &#xff0c;那么整个初…...

【力扣hot100题】(062)搜索插入位置

感觉自己对二分法还是没有很好掌握&#xff0c;主要在于边界问题&#xff0c;只会基本的搜索&#xff0c;如果要搜索比目标值大的第一个索引或者比目标值小的最后一个索引&#xff08;或者换一些花里胡哨的题目&#xff09;就完全不会了。 class Solution { public:int search…...

TCPIP详解 卷1协议 三 链路层

3.1——以太网和IEEE802局域网/城域网标准 以太网这个术语通常指一套标准&#xff0c;由DEC&#xff0c;Intel公司和Xerox公司在1980年首次发布&#xff0c;并在1982年加以修订。第一个常见格式的以太网&#xff0c;目前被称为10Mb/s以太网或共享以太网。它被IEEE采纳为802.3标…...

以太网安全

前言&#xff1a; 端口隔离可实现同一VLAN内端口之间的隔离。用户只需要将端口加入到隔离组中&#xff0c;就可以实现隔离组内端口之间的二层数据的隔离端口安全是一种在交换机接入层实施的安全机制&#xff0c;旨在通过控制端口的MAC地址学习行为&#xff0c;确保仅授权设备能…...

linux如何查看当前系统的资源占用情况

在 Linux 系统中&#xff0c;有多个命令可以查看当前系统的资源占用情况。以下是一些常用的命令及其说明&#xff1a; 1. 查看内存使用情况&#xff1a;free free -h-h 参数表示以人类可读的格式显示&#xff08;如 MB, GB&#xff09;。输出示例&#xff1a; to…...

人脸识别系统(人脸识别、前后端交互、Python项目)

基于Flask、Face_Recognition的人脸识别系统 项目介绍 基于flask、face_recognition的人脸识别系统。 本项目采用Face_Recognition库内置的ResNet-34预训练模型&#xff0c;其已对LFW公开数据集进行预训练而得到的模型。利用ResNet-34预训练模型&#xff0c;可使用少量已知人…...

2025 ArkTS语言开发入门之前言(二)

2025 ArkTS语言开发入门之前言&#xff08;二&#xff09; 前言 在上一节&#xff0c;咱们学习了如何下载并安装ArkTS的集成开发环境&#xff0c;这时候有的臭宝会发现&#xff0c;左边的这些叽里咕噜的是什么&#xff1f;下面&#xff0c;我来带着臭宝们来学习一下这些是什么…...

VLAN(虚拟局域网)

一、vlan概述 VLAN(virtual local area network)是一种通过逻辑方式划分网络的技术&#xff0c;允许将一个物理网络划分为多个独立的虚拟网络。每一个vlan是一个广播域&#xff0c;不同vlan之间的通信需要通过路由器或三层交换机 [!注意] vlan是交换机独有的技术&#xff0c;P…...

2025.4.6总结

今日记录&#xff1a;今天玩的有些累&#xff0c;先是去护肤店护理了脸部&#xff0c;然后去汉口江滩那看了看美景&#xff0c;吹吹江风。节假日去玩&#xff0c;光是挤一个半小时地铁都感觉累。还好上下班期间不用挤地铁&#xff0c;不然还真受不了。 假期小结 1.消费&#…...

【清明折柳】写在扬马三周目后

黄绿之间&#xff0c;方寸之外。 文章目录 楔子解耦到离散螃蟹与毒药文本的力量朝花夕拾后记 楔子 “——就像物理学家通过演绎与归纳将宏微世界的运转规律浓缩到数学公式中时&#xff0c;如今的人工智能也在试图量化整个人类文明。” “——只是&#xff0c;使用的是昂贵、笨…...

P1258 小车问题(二分)

题目描述 甲、乙两人同时从 A 地出发要尽快同时赶到 B 地。出发时 A 地有一辆小车&#xff0c;可是这辆小车除了驾驶员外只能带一人。已知甲、乙两人的步行速度一样&#xff0c;且小于车的速度。问&#xff1a;怎样利用小车才能使两人尽快同时到达。 输入格式 仅一行&#x…...

一个基于ragflow的工业文档智能解析和问答系统

工业复杂文档解析系统 一个基于ragflow的工业文档智能解析和问答系统,支持多种文档格式的解析、知识库管理和智能问答功能。 系统功能 1. 文档管理 支持多种格式文档上传(PDF、Word、Excel、PPT、图片等)文档自动解析和分块处理实时处理进度显示文档解析结果预览批量文档…...

负指数二项式展开

转载&#xff1a;负指数二项式展开_二项式负数次幂的展开式-CSDN博客...

CentOS 7服务器上快速安装mamba函数库

本次预配置虚拟环境为cuda 11.8torch 2.2.2python 3.10 1. 创建conda虚拟环境&#xff1a;conda create -n mamba python3.10 激活环境&#xff1a;conda activate mamba 2. 安装Pytorch环境&#xff1a; conda install pytorch2.2.2 torchvision0.17.2 torchaudio2.2.2 py…...

ResNet改进(18):添加 CPCA通道先验卷积注意力机制

1. CPCA 模块 CPCA(Channel Prior Convolutional Attention)是一种结合通道先验信息的卷积注意力机制,旨在通过显式建模通道间关系来增强特征表示能力。 核心思想 CPCA的核心思想是将通道注意力机制与卷积操作相结合,同时引入通道先验知识,通过以下方式优化特征学习: 通…...

代码随想录算法训练营--打卡day6

一.四数相加 1.题目链接 454. 四数相加 II - 力扣&#xff08;LeetCode&#xff09; 2.思路 使用 HashSet 无法记录每种和出现的次数&#xff0c;当不同的 (nums1[i], nums2[j]) 组合得到相同的和时&#xff0c;会出现统计错误。这里应该使用 HashMap 来记录和以及其出现的…...

edge webview2 runtime跟Edge浏览器软件安装包双击无反应解决方法

软件安装报错问题有需要远程文章末尾获取联系方式&#xff0c;可以帮你远程处理各类安装报错。 一 、edge webview2 runtime跟Edge浏览器软件安装包双击无反应 在安装edge webview2 runtime跟Edge浏览器双击无反应没有出现安装界面。这个可能是 新版本的Edge WebView2 Runti…...

Xorg 内存上涨的根源探究

Xorg 内存上涨的根源探究 起因 在同一客户端进程内显示多股视频源,通过SDL创建窗口渲染,由于网络抖动视频源出现频繁断流现象导致,渲染任务反复重启,从而导致SDL渲染窗口反复创建释放,最后导致Xorg内存持续上涨 排查准备 Xorg是什么? Xorg(X.Org Server)是 X Wind…...

Neo4j基本命令使用

neo4j neo4j简介安装可视化管理后台登录 Cyphercreatematchmergecreate创建关系merge创建关系wheredelete sort命令字符串函数toUpper()函数toLower()函数substring()函数replace()函数 聚合函数count()函数max()函数min()函数sum()函数avg()函数索引index python 中使用neo4j …...

Python爬虫教程009:requests的基本使用以及get和post请求的使用

文章目录 5.1 基本使用5.2 get请求5.3 post请求5.1 基本使用 在 Python 爬虫开发中,requests 是一个非常流行、简单易用的 HTTP 库,用于发送网络请求。它可以让你方便地抓取网页内容、提交表单、上传文件等。 🔧安装: pip install requestsresponse的属性及类型: resp…...

SQL练习

目录 1.查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数 2.查询平均成绩大于等于 60 分的同学的学生编号和学生姓名和平均成绩 3.查询在 SC 表存在成绩的学生信息 4.查询所有同学的学生编号、学生姓名、选课总数、所有课程的总成绩(没成绩的显…...

ubuntu20.04 复现fastlio2 并运行数据包

1.搭建文件目录和拷贝代码 mkdir -p Fastlio2/src cd Fastlio2/src git clone https://github.com/hku-mars/FAST_LIO.git git clone https://github.com/Livox-SDK/livox_ros_driver.git 2.到工作空间下编译 cd .. catkin_make 报错1&#xff1a; 解决方案1&#xff1a; …...

Windows安装 PHP 8 和mysql9,win下使用phpcustom安装php8.4.5和mysql9

百度搜索官网并下载phpcustom&#xff0c;然后启动环境&#xff0c;点击网站管理 里面就有php8最新版&#xff0c;可以点mysql设置切mysql9最新版&#xff0c;如果你用最新版无法使用&#xff0c;说明你的php程序不支持最新版的mysql MySQL 9.0 引入了一些新的 SQL 模式和语法变…...

【失配树 KMP+树上倍增】P5829失配树|省选-

本文涉及知识点 较难理解的字符串查找算法KMP 树上倍增 P5829 【模板】失配树 题目描述 给定一个字符串 s s s&#xff0c;定义它的 k k k 前缀 p r e k \mathit{pre}_k prek​ 为字符串 s 1 … k s_{1\dots k} s1…k​&#xff0c; k k k 后缀 s u f k \mathit{suf}_…...

机器学习模型性能提升教程(特征工程和模型优化)

特征工程和模型优化是提升机器学习模型性能的核心步骤&#xff0c;以下从特征工程和模型优化两个维度&#xff0c;结合具体案例展开说明&#xff1a; 一、特征工程 特征工程的核心目标是从原始数据中提取更有价值的信息&#xff0c;常见方法包括特征选择、特征构造和特征转换。…...

跨域问题前端解决

由于浏览器的同源策略&#xff0c;前后端分离的项目&#xff0c;调试的时候总是会遇到跨域的问题&#xff0c;这里通过修改前端代码解决跨域问题。 首先先查看前端代码的根目录下&#xff0c;有没有vue.config.js文件, 若有&#xff0c;使用方法1&#xff0c;若没有此文件&…...

每天五分钟深度学习框架pytorch:搭建LSTM完成时间序列的预测

本文重点 前面一篇文章我们使用了pytorch搭建了循环神经网络LSTM然后完成了手写字体识别的任务,本文我们使用LSTM完成一个时间序列的任务。 数据集介绍 数据集如图所示,其中有一列是时间,然后还有一列是对应时间的起飞航班数,它可以看成是一个时间序列,通过前面t时间的起…...

Autosar应用层开发基础——Arxml制作

Davinci软件的主要作用 (1) AUTOSAR 软件架构设计 图形化建模&#xff1a;支持 SWC&#xff08;Software Component&#xff09;设计、接口定义、端口连接等。 分层架构管理&#xff1a;清晰划分 应用层&#xff08;SWC&#xff09; 和 基础软件层&#xff08;BSW&#xff09…...

Word 页眉设置(不同章节不同页眉)

需求分析 要给文档设置页眉&#xff0c;但是要不同的页眉不同的页眉 问题点&#xff1a;一旦设置页眉 每个页眉都是一样的 现在要设置不一样的 设置了页眉但是整个文章的页眉都一样 问题解决 取消链接 前一节&#xff08;不和前面的页眉同步更新&#xff09; 小结 不同的…...

Redis的Java客户端的使用

Redis 的 Java 客户端使用 C 追求极致的性能, 而 Java没有这样的追求. Redis 在官网公开了所使用的应用层协议 (RESP). 任何一个第三方都可以通过这个协议, 来实现出一个和 Redis 服务器通信的客户端程序. 已经有很多大佬, 做好了库, 可以让我们直接调用 (不必关注 RESP 协议…...

双向链表示例

#include <stdio.h> #include <stdlib.h>// 定义双向链表节点结构体 typedef struct list {int data; // 数据部分struct list *next; // 指向下一个节点的指针struct list *prev; // 指向前一个节点的指针 } list_t;// 初始化链表&#xff0c;将链表的…...

Unity如何把一个物体下物体复制很多到别的物体下

C# 脚本批量复制 如果需批量复制到多个父物体下&#xff0c;推荐用脚本实现&#xff1a; using UnityEngine;public class CopyChildren : MonoBehaviour {// 原父物体&#xff08;拖拽赋值&#xff09;public Transform sourceParent;// 目标父物体数组&#xff08;可拖拽多个…...

Java Properties 类详解

Java Properties 类详解 Properties 是 Java 中用于处理 键值对配置文件 的特殊类&#xff0c;继承自 Hashtable<Object,Object>。以下是其核心知识点&#xff1a; 1. 核心特性 特性说明存储格式纯文本文件&#xff08;.properties&#xff09;&#xff0c;每行 keyval…...

进程内存分布--之理论知识

一个由C/C编译的程序占用的内存分为以下几个部分 &#xff1a; 1、栈区&#xff08;stack&#xff09;&#xff1a;由编译器自动分配释放 &#xff0c;存放函数调用函数的参数值&#xff0c;局部变量的值等。其操作方式类似于数据结构中的栈。 2、堆区&#xff08;heap&#xf…...

TDengine 窗口预聚集

简介 在大数据量场景下&#xff0c;经常需要查询某段时间内的汇总结果&#xff0c;当历史数据变多或者时间范围变大时&#xff0c;查询时间也会相应增加。通过预聚集的方式可以将计算结果提前存储下来&#xff0c;后续查询可以直接读取聚集结果&#xff0c;而不需要扫描原始数…...

高精度加法与乘法

原理就是模拟我们列竖式的过程。 一、加法 加法很简单&#xff0c;我们这里不再赘述 string solve(string s, string t) {string ans;int tmp 0;int n s.size()-1;int m t.size()-1;while(n>0||m>0||tmp){if(n>0){tmp s[n--]-0;}if(m>0){tmp t[m--]-0;}ans…...

macOS可视化桌面配置docker加速器

macOS可视化桌面配置docker加速器 在镜像settings->docker Engine改为国内镜像修改为国内镜像重启docker(可视化界面启动或者使用命令行)使用命令重启可视化界面重启 在镜像settings->docker Engine改为国内镜像 修改为国内镜像 {"registry-mirrors": ["…...

不用训练,集成多个大模型产生更优秀的输出

论文标题 Collab: Controlled Decoding using Mixture of Agents for LLM Alignment 论文地址 https://arxiv.org/pdf/2503.21720 作者背景 JP摩根&#xff0c;马里兰大学帕克分校&#xff0c;普林斯顿大学 动机 大模型对齐&#xff08;alignment&#xff09;的主要目的…...

【大模型】DeepSeek + 蓝耕MaaS平台 + 海螺AI生成高质量视频操作详解

目录 一、前言 二、蓝耘智能云MaaS平台介绍 2.1 蓝耘智算平台是什么 2.2 平台优势 2.3 平台核心能力 三、海螺AI视频介绍 3.1 海螺AI视频是什么 3.2 海螺AI视频主要功能 3.3 海螺AI视频应用场景 3.4 海螺AI视频核心优势 3.5 项目git地址 四、蓝耘MaaS平台DeepSeek海…...

RobotFrameWork环境搭建及使用

RF环境搭建 首先安装python并且配置python环境变量pip install robotframeworkpip install robotframework-ride 生产桌面快捷方式 不行换豆瓣源检查一下pip list RF类库和扩展库 标准库 按F5快捷键查询&#xff0c;可以看到rf自带的库不需要额外安装这些标准库在python的 …...

Flutter之设计与主题字体

目录&#xff1a; 1、共享主题样式2、文字3、使用自定义字体4、以 package 的方式使用字体1. 将字体添加到 package2. 将 package 和字体添加到应用3. 使用字体 1、共享主题样式 MaterialApp(title: appName,theme: ThemeData(// Define the default brightness and colors.col…...

发生梯度消失, 梯度爆炸问题的原因,怎么解决?

目录 一、梯度消失的原因 二、梯度爆炸的原因 三、共同的结构性原因 四、解决办法 五、补充知识 一、梯度消失的原因 梯度消失指的是在反向传播过程中&#xff0c;梯度随着层数的增加指数级减小&#xff08;趋近于0&#xff09;&#xff0c;导致浅层网络的权重几乎无法更新…...

脑电学习笔记

一&#xff0c;原理简介 使用eprime或者matlab给被试呈现刺激&#xff0c;并在某个时间发送Mark&#xff0c;脑电帽会同步采集被试的脑电信号&#xff0c;经放大器放大后&#xff0c;控制盒会把脑电信号和mark 信号同步到一起&#xff0c;通过usb线传入到采集系统&#xff08;比…...