JavaScript 箭头函数

1.什么是箭头函数

  箭头函数是ES6新定义函数的语法 

  语法:(参数)=>函数体

  传统函数:

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

        箭头函数

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

2.箭头函数的用法

 2.1省略保函参数的小括号

   如果只有一个参数,参数小括号可以省略。只有没有参数或多个参数的情况下不能省略

   实例:

    let sum = x =>{return x+1;}
 2.2省略函数体的大括号

   条件:

    只有一行代码

    省略大括号会返回这一行的值

    省略大括号不能有return关键字

   实例:

    let sum = (a,b) =>a+b;//相当于return a+b;

 2.3嵌入函数(非常适用,语法简洁)

   JS嵌套函数:函数的调用,必须调用该最外层主函数。

  传统JS嵌入函数写法(柯里化):

     

 funtion add(a){return function(b){return a+b;}}//调用console.log(add(4)(5))
箭头函数写法(柯里化):
     const add = (a)=>(b)=>{return a+b;}   //调用console.log(add(4)(5))
多重嵌套函数对比
 ES5写法:
function insert(value){//插入的值return into:function(array){//要插入的数组return after:function(afterValue){//添加元素的位置,或者理解为把元素添加在什么位置赋予什么下标array.splice(array.indexof(afterValue)+1,0,value)//删除数组元素afterValue,并向数组中插入新的值元素valuereturn array;}}}

调用:

console.log(insert(1).into([1,3]).after(1))//向数组中传入元素1,在素组下表加2的位置中,素组为【1,3】,最终返回【1,1,3】,详情见array.splice()函数

ES6写法:
let Insert = (value)=>({into:(array=>({after:affterValue){array.splice(array.indexof(afterValue)+1,0,value);return array;}})
})

调用:

console.log(insert(1).into([1,3]).after(1))//向数组中传入元素1,在素组下表加2的位置中,素组为【1,3】,最终返回【1,1,3】,详情见array.splice()函数

2.4箭头函数的指向

什么是this,作用,使用

  this的本质是”一个对象数据结构“,用于指向数据 ,通过this关键字可以操作和使用数据

函数的this指向

   1.this指向Window 声明式函数 匿名函数 定时器 延时器 forEach循环

   2.this指向事件源 事件绑定中,事件处理函数this指向默认是事件源,也就是绑定事件的标签对象

   3.this指向数组/对象 数组/对象中存储的函数this,指向的就是数组/对象

箭头函数this指向

 箭头函数的this指向,是父级程序this的指向

 如果没有父级程序,或者父级程序没有指向,则指向的是Window

实例

(一)匿名函数绑定的事件处理函数,指向事件源,也就是div标签对象

      oDiv.addEventListener('click',function(){console.log(this)})

(二)箭头函数this的指向是父级程序的指向,下面箭头函数没有父级程序,所以指向的是Window

      oDiv.addEventListener('click',()=>{console.log(this)})

(三)对象中定义的函数和箭头函数

      const obj={name:'张三',age:18,sex:'男',fun1:funtion(){//对象中定义的函数,this指向对象本身,返回Objconsole.log(this)},fun2:()=>{//没有父级程序的箭头函数,指向的是Window,返回Windowconsole.log(this)},fun3:function(){//对象中定义的函数fun3中,this指向的是对象本身Objfun4:()=>{console.log(this)//箭头函数fun4中this指向父级程序fun3,fun3指向对象本身,所以fun4的this指向也是返回Obj}fun4();}}

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

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

相关文章

【JavaScript】NPM常用指令指南

河水清清弯又长 姑娘水边浣霓裳 清风卷过白云旁 飞鸟载来春花香 河水清清弯又长 姑娘水边浣霓裳 清风卷过白云旁 朝霞换夕阳 重逢是梦乡 春潮悠悠送波浪 石桥湾下小舟荡 此去经年谁如常 难得人间笑一场 春潮悠悠送波浪 石桥湾下小舟荡 此去经年谁如常 故人心头上 地久天又长 …

Word文档密码设置:Python设置、更改及移除Word文档密码

给Word文档设置打开密码是常见的Word文档加密方式。为Word文档设置打开密码后,在打开该文档时,需要输入密码才能预览及编辑,为Word文档中的信息提供了有力的安全保障。如果我们需要对大量的Word文档进行加密、解密处理,Python是一…

1. Java基础入门

1. Java基础入门 1.1 Java介绍(了解) 1.1.1 Java背景 Java是美国 sun 公司(Stanford University Network)在1995年推出的一门计算机高级编程语言。Java 之父:詹姆斯高斯林(James Gosling)。 2009年 sun公司被Oracle公司收购。Java公司图标…

大数据面试题 —— Zookeeper

目录 ZooKeeper 的定义ZooKeeper 的特点ZooKeeper 的应用场景你觉得Zookeeper比较重要的功能ZooKeeper 的选举机制 ***zookeeper主节点故障,如何重新选举?ZooKeeper 的监听原理 ***zookeeper集群的节点数为什么建议奇数台 ***ZooKeeper 的部署方式有哪几…

JAVA 栈和队列总结

除了最底层下面三个是实现类,其他都是接口。 双端队列(队头队尾都可以插入和删除元素)的方法: 普通队列方法: 常用的是add(),poll(), element() 我们用Deque(双端队列)实现栈 Deque当栈用的时候的方法。 deque.push…

利用WebGL绘制简单几何

利用WebGL绘制最简单的几何图形 一、WebGL简介 WebGL是一种用于在网页上渲染交互式3D和2D图形的JavaScript API。它基于OpenGL ES 2.0,提供了一种在浏览器中使用硬件加速图形的方式。 二、图形系统绘图流程 图形系统的通用绘图流程会包括六个部分: …

2024年【电工(初级)】考试内容及电工(初级)证考试

题库来源:安全生产模拟考试一点通公众号小程序 2024年【电工(初级)】考试内容及电工(初级)证考试,包含电工(初级)考试内容答案和解析及电工(初级)证考试练习…

C++中的类模板

C中的类模板 类模板 类模板在C中是一种非常强大的工具,它允许程序员编写与数据类型无关的代码。简单来说,类模板允许你定义一个蓝图,这个蓝图可以用来生成具体类型的类。使用类模板可以提高代码的复用性,减少重复代码&#xff0…

字节跳动春招研发部分编程题汇总做题笔记---Java

3.雀魂启动! 小包最近迷上了一款叫做雀魂的麻将游戏,但是这个游戏规则太复杂,小包玩了几个月了还是输多赢少。 于是生气的小包根据游戏简化了一下规则发明了一种新的麻将,只留下一种花色,并且去除了一些特殊和牌方式&…

Java基础知识总结(14)

map集合 /* java.util.Map接口中常用的方法 1、Map和Collection 没有继承关系 2、Map集合以key和value的方式存储数据:键值对key和valuea都是引用数据类型key和value都是存储对象的内存地址key起到主导地位,value是key的一个附属品 3、Map接口中常用的方…

GDAL实现大幅影像的快速读取

这里做个备份,原文链接 遥感影像小则几百兆,大则5,6GB,所以在使用GDAL进行图像读取时面临读写速度较慢的问题,我们可以深入研究gdal中RasterIO函数的机制,发现该函数是通过一行一行读取影像来实现影像读入内存的&…

【教学类-40-01】20240322 幼儿视力检查照片合成GIF

作品展示——GIF动图 背景需求: 2024年3月22日,中班幼儿视力检查,保健老师表扬我们班幼儿视力正常率高。 我为每位孩子拍照时,突然想把动作图用Python变成GIF图片,于是每位孩子都拍了多张“辨认视力表的不同手势”&a…

基于Springboot的西安旅游系统(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的西安旅游系统(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构&…

动态规划(算法竞赛、蓝桥杯)--单调队列优化绿色通道

1、B站视频链接&#xff1a;E45 单调队列优化DP 绿色通道_哔哩哔哩_bilibili #include <bits/stdc.h> using namespace std; const int N5e410; int n,tim,w[N],f[N],q[N];bool check(int m){int h1,t0;for(int i1; i<n; i){while(h<t && f[q[t]]>f[i-…

visual studio卸载几种方法

1、控制面板卸载&#xff1b; 2、有时候会发现控制面板卸载会失败&#xff0c;无法卸载&#xff0c;这时候要先把下面目录的关于visual studio的都删除&#xff0c;然后重启电脑后&#xff0c;重新安装vs即可。

使用echart绘制拓扑图,树类型,自定义tooltip和label样式,可收缩

效果如图&#xff1a; 鼠标移上显示 vue3 - ts文件 “echarts”: “^5.4.3”, import { EChartsOption } from echarts import * as echarts from echarts/core import { TooltipComponent } from echarts/components import { TreeChart } from echarts/charts import { C…

复试专业前沿问题问答合集10-1——区块链与加密货币

复试专业前沿问题问答合集10-1——区块链与加密货币 区块链与加密货币安全以及6G通信的基础知识问答: 区块链以及加密货币相关的基础安全知识 包括区块链如何确保交易安全、共识机制的作用、加密货币钱包的保护措施、智能合约的工作原理以及如何防范潜在的网络攻击。这些知…

vue项目实现---用户在页面没有操作5分钟时退出登录

方案1: 后端处理 (1)用户切换页面或者点击按钮时需要发送请求接口,如果后端判断在5分钟之内没有请求,然后将前端的token失效 方案2: 前端处理 (1)在main.js中创建全局的事件监听器来实现对键盘抬起事件和鼠标点击事件的监听 试例:Vue 项目中全局监听键盘抬起事件和鼠标点击…

【笔记】KaiOS SPN显示逻辑

更新流程code 1、gonk/dom/system/gonk/radio/RadioInterfaceLayer.jsm handleNetworkStateChanged -> requestNetworkInfo() -> handleRilResponse的getOperator -> handleOperator handleNetworkStateChanged:网络状态变化请求网络信息 this.requestNetworkInfo…

实用福利网站分享

1.http://www.w3school.com.cn w3school&#xff0c;很好的在线web学习网站&#xff0c;免费 2.https://sklearn.apachecn.org sklearn文档&#xff0c;虽然是文档&#xff0c;但能学到很多很多具体的机器学习例子和知识 3.http://www.runoob.com 菜鸟教程&#xff0c;也是…