位置: IT常识 - 正文

JavaScript高级 |如何玩转箭头函数?(javascript 高级教程)

编辑:rootadmin
JavaScript高级 |如何玩转箭头函数?

推荐整理分享JavaScript高级 |如何玩转箭头函数?(javascript 高级教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript高级程序编程,javascript高级语言,javascript高级程序设计和权威指南,js 高级技巧,javascript高级语言,javascript 高级教程,js 高级技巧,js 高级技巧,内容如对您有帮助,希望把文章链接给更多的朋友!

本文已收录于专栏

⭐️ 《JavaScript》⭐️

学习指南:箭头函数语法规则简写规则常见应用mapfilterreduce箭头函数中的this使用concatthis的查找规则完结散花参考文献箭头函数

在ES6中新增了函数的简写方式----箭头函数,箭头函数的出现不仅简化了大量代码,也让代码看起来更加优雅,同时也解决了this指向问题,下面我们就来详细讲解如何玩转箭头函数。

语法规则之前的方法function foo1(){}var foo2 = function(name,age){console.log("函数体代码",this,arguments); console.log(name,age);}箭头函数完整写法var foo3 = (name,age) => {console.log("箭头函数的函数体") console.log(name,age);}箭头函数遍历数组曾经的写法var names = ["abc","cba","nba"];names.forEach(function(item)){console.log(item);})箭头函数的写法names.forEach((item,idx,arr)=>{ console.log(item,idx,arr);} )

setTimeout(()=>{console.log("setTimeout");},3000)简写规则如果箭头函数只有一个函数,那么()可以省略name.forEach(item =>{console.log(item);}filter()配合箭头函数,可以高效的筛选出符合条件的数字。var newNums = nus.filter(item =>{ return item % 2;})如果函数体中只有一行执行代码,那么{} 可以省略.并且这行代码的返回值会作为整个函数的返回值,所以不需要加 returnnames.forEach(item => console.log(item));filter()函数在只有一行执行,可以直接省略{}varans = worker.filter( item=>item % 2 )如果默认返回值是一个对象,那么这个对象必须加()

注意:在react 的 redux 经常使用。 我们会发现当箭头函数 同时遇到 执行体的大括号和对象的大括号时,箭头函数无法区分

var arrFn = () =>{} //此大括号是执行体var arrFn = () =>{ name : "why"}// 此大括号是对象

所以为了区别执行器,必须要给对象加()

var arrFn = () =>({ name : "why"})常见应用map

map() 方法定义在JS的Array中,它返回一个新的数组,数组中的元素为原始数组调用函数后处理的值。 值得注意的是:

map()函数不会对空数组进行检测。map()函数不会改变原始数组,它形成的是一个新数组。array.map(function(currentValue, index, arr), thisIndex)

参数说明:

function(currentValue,index,arr):必填数组中的每个元素都会执行这个函数。currentValue:必填,表示当前元素的值。index:可选,当前元素的索引也就是第几个数组元素。arr:可选,当前元素属于的数组对象。thisValue:可选,对象作为该执行回调时使用,传递给函数,用作“this”的值。

例1:对原数组进行平方后赋值给新数组。

let arry = [1,2,3,4];let newArray = array.map((item)=>{ return item*item;})

也可以化简成下面一行代码。

let newArray = array.map(item =>item * item)

例2:对原数组的偶数进行平方后赋值给新数组。

filter

filter() 用于对数组进行过滤。

原理是它创建一个新数组,新数组的元素是通过检查指定数组中符合条件的所有元素。filter把传入的函数依次作用在每一个元素,然后根据返回值是true还是false决定保留还是丢弃元素。Array.filter(function(currentValue, indedx, arr), thisValue)

参数说明:

function(currentValue,index,arr):必填数组中的每个元素都会执行这个函数。currentValue:必填,表示当前元素的值。index:可选,当前元素的索引也就是第几个数组元素。arr:可选,当前元素属于的数组对象。thisValue:可选,对象作为该执行回调时使用,传递给函数,用作“this”的值。let newArray = array.filter(item=>item%2===0).map(item =>item * item)

例3:对原数组中的偶数下标进行平方后赋值给新数组。

let array = [1, 2, 3, 4]; let newArray = array.filter((item,idx)=>idx%2===0).map(item =>item * item)JavaScript高级 |如何玩转箭头函数?(javascript 高级教程)

例4:巧妙利用 arr 参数,给数组去重.

var newArray = array.filter((item,idx,arr)=>arr.indexOf(item) === idx)

例2:对原数组的偶数进行平方后求累加和。

reduce用于遍历数组,可以设置初始值,大大增强了代码的可读性,同时还有一个参数可以做累计计算。array.reduce((pre, cur, index, arr),init)

参数说明:

function((pre, cur, index, arr)):必填pre: 必填,积累值cur: 必填。当前元素。index: 可选。当前下标。arr: 可选。当前数组。init: 可选。传递给函数的初始值,但传入参数为两个时,init 是累计值 pre的初始值。

如果reduce的参数只有一个,那么累计值的初始值是数组的第一个值。

如果reduce的参数有两个,那么积累值初始值就是设置好的 参数init初始值。

在每一次迭代中,返回的值都作为下一次迭代的 pre累计值。

var ans = arr.filter(item=>item%2).map(item=>item*item).reduce((x,y)=>x+y,0);箭头函数中的this使用

普通函数中是有this的标识符

function foo(){console.log("foo",this);}foo()//windowfoo.apply("aaa")//aaa

箭头函数中,压根没有this。

var bar = ()=>{console.log("bar",this)}bar()//windowbar.apply("AAA")//windowconcat

concat()方法是用于连接两个或多个数组。

var arr = [1, 2, 3, 4];var arr2 = [7, 8, 9, 10];var ans = [].concat(arr,arr2);console.log(ans);//输出:(8) [1, 2, 3, 4, 7, 8, 9, 10]this的查找规则

因为箭头函数中没有this的标识符,所以当箭头函数内部开始调用this时。

JavaScript引擎就从作用域由里到外的找含有this指向的作用域。

var obj ={name:"obj", foo:function(){ var bar = ()=>{ console.log("bar",this); } return bar; }}第一层 bar箭头函数:没有。第二层 function 函数:指向obj。

所以例子中的 this 指向obj。

var obj ={name:"obj", foo:()=>{ var bar =()=>{ console.log("bar:",this); } return bar; }}第一层 bar箭头函数:没有。第二层 foo箭头函数:没有。第三层 全局作用域:指向window。

所以例子中的 this 指向window。

模拟网络发送请求

封装 request 工具函数function request(url,callback){ var res = ["abc","cba","nba"]; callback(res);}实际操作的位置早期的写法

因为此时传入 request 的function ,就是 request 定义中的 callback()。 所以 function 中的参数就是 request 定义中的 res 数组,然后赋值给了 此对象中names 但因为 function 是个回调函数的this 的指向是 window,所以需要在外层的函数中,规定一个_this指向当前对象。

var _this = this;

然后 将获取过来的 res 数组 赋值给 _this 中的names

_this.name = [].concat(ans);var obj = {names:[], network:function(){ var _this = this; request("/names",function(ans){ _this.name = [].concat(ans); })}箭头函数的写法

因为箭头函数本身是没有 this的,js引擎会由内往外的找 this的指向。 发现 外层的 函数 this指向obj,于是 this 就指向了 obj。

var obj = {names:[], network:function(){ request("/names",(ans)=>{ this.name = [].concat(ans); })}完结散花

ok以上就是对 JavaScript高级 |如何玩转箭头函数? 的全部讲解啦,很感谢你能看到这儿。如果有遗漏、错误或者有更加通俗易懂的讲解,欢迎小伙伴私信我,我后期再补充完善。

参考文献

coderwhy老师JS高级视频教程

本文链接地址:https://www.jiuchutong.com/zhishi/300571.html 转载请保留说明!

上一篇:SPL工业智能:发现时序数据的异常(工业 智能)

下一篇:NProgress的用法(progress的用法及短语)

  • oppoa11拆机视频(oppoa127)(oppoa11手机拆机图解)

    oppoa11拆机视频(oppoa127)(oppoa11手机拆机图解)

  • 华为服务中心怎么关闭(华为服务中心怎么卸载)

    华为服务中心怎么关闭(华为服务中心怎么卸载)

  • OPPO Ace2的机身尺寸是多少(oppoace机身尺寸)

    OPPO Ace2的机身尺寸是多少(oppoace机身尺寸)

  • 苹果a2111是什么型号(a222苹果11是什么意思)

    苹果a2111是什么型号(a222苹果11是什么意思)

  • 防闪烁模式有什么用(防闪烁模式什么手机有)

    防闪烁模式有什么用(防闪烁模式什么手机有)

  • 笔记本numlock键在哪 (笔记本numlock键一直亮)

    笔记本numlock键在哪 (笔记本numlock键一直亮)

  • windows+r什么意思(windows re是什么)

    windows+r什么意思(windows re是什么)

  • word出现问题弹窗关不掉(word出现问题弹窗关不掉 没有自动保存)

    word出现问题弹窗关不掉(word出现问题弹窗关不掉 没有自动保存)

  • Word怎么删除字符串中的空格(word怎么删除字与字之间的空白)

    Word怎么删除字符串中的空格(word怎么删除字与字之间的空白)

  • wps项目符号在哪里(wps文字项目符号)

    wps项目符号在哪里(wps文字项目符号)

  • 段落之间空白无法删除(段落之间没有空格怎么弄)

    段落之间空白无法删除(段落之间没有空格怎么弄)

  • 酷狗会员最多几个人可以同时登录(酷狗会员最多几个人用)

    酷狗会员最多几个人可以同时登录(酷狗会员最多几个人用)

  • 微博绑定手机号上限(微博绑定手机号注销了怎么登录)

    微博绑定手机号上限(微博绑定手机号注销了怎么登录)

  • 腾讯会议怎么关自己麦(腾讯会议怎么关闭摄像头)

    腾讯会议怎么关自己麦(腾讯会议怎么关闭摄像头)

  • 华为p40和p40pro拍照区别(华为p40和p40pro拍照评测)

    华为p40和p40pro拍照区别(华为p40和p40pro拍照评测)

  • qq有一个共同好友是不是自己(QQ有一个共同好友)

    qq有一个共同好友是不是自己(QQ有一个共同好友)

  • 如何进入中国知网免费入口(如何进入中国知网进行文献查阅)

    如何进入中国知网免费入口(如何进入中国知网进行文献查阅)

  • 手机屏中间鼓起来了怎么回事(手机屏中间鼓起一个包)

    手机屏中间鼓起来了怎么回事(手机屏中间鼓起一个包)

  • 传真机一直滴滴响怎么回事(传真机一直嘟嘟响不停)

    传真机一直滴滴响怎么回事(传真机一直嘟嘟响不停)

  • 小米mix2s长度(小米mix2手机长宽)

    小米mix2s长度(小米mix2手机长宽)

  • 华为lonal00什么型号(华为lonal00手机报价)

    华为lonal00什么型号(华为lonal00手机报价)

  • 朋友圈置顶语怎么设置(朋友圈置顶语怎么弄)

    朋友圈置顶语怎么设置(朋友圈置顶语怎么弄)

  • 荣耀智能手环3怎样调时间(荣耀智能手环怎么连接手机)

    荣耀智能手环3怎样调时间(荣耀智能手环怎么连接手机)

  • Redmi K20 Pro前后摄像头像素(红米k20pro后面)

    Redmi K20 Pro前后摄像头像素(红米k20pro后面)

  • mac电脑忘记管理员密码(mac系统忘记管理员)

    mac电脑忘记管理员密码(mac系统忘记管理员)

  • 前级功放与后级功放有什么区别(前级功放与后级功放)

    前级功放与后级功放有什么区别(前级功放与后级功放)

  • 抖音怎样配本地音乐(抖音怎么使用本地音乐配乐)

    抖音怎样配本地音乐(抖音怎么使用本地音乐配乐)

  • 全国增值税发票服务平台
  • 堤防是啥
  • 企业所得税汇算清缴操作流程
  • 劳务公司如何避税与避费
  • 个税申报的收入是应发工资还是实发工资
  • 结构性存款需要缴纳增值税吗
  • 一季度计提的所得税分录
  • 投资款返还案例
  • 计提房产税计入哪个科目
  • 二手车销售统一专票图片
  • 在建投资性物业管理办法
  • 不动产抵扣进项税
  • 银行汇票应计入什么科目
  • 企业收不回款项计入什么科目?
  • 公司开出的经济补偿金可以税前扣除吗
  • 公司没有缴纳住房公积金离职能要求补缴吗
  • 营业执照印花税减免政策
  • 购销行为是什么
  • 加计扣除税怎么出分录
  • 员工离职一次性结清工资
  • android 设置按钮颜色
  • 苹果输入法快捷键怎么调出来
  • 弥补亏损的会计分录是怎样的
  • 计提工资大于实际工资
  • 微软汽车
  • win10粘贴复制无效
  • 投标保证金退回是什么意思
  • 进程process
  • 手机短信是哪一年开始的
  • 别人说你坏话怎么发朋友圈说说
  • php字符串转浮点型
  • php生成二维码源码
  • 销售收入与销售成本
  • 应交增值税专栏下的增值税项目有哪些?
  • 企业境外所得税额抵免限额应分国分项计算
  • 企业所得税的销售收入包括哪些
  • 头歌java第一课
  • 图表库网站
  • opencv制作训练数据集
  • php实用教程
  • 小型微利企业的认定标准
  • 残疾人就业保障金计入什么科目
  • 公司的银行账号是不是和个人账号不一样
  • 车改补贴算工资吗
  • 公司购烟酒怎么入账
  • 职工福利费的会计处理
  • 购买性支出和转移性支出都计入GDP
  • 营业成本指的什么
  • 购进固定资产没有发票怎么入账
  • 银行账户收费开户流程
  • 为什么要进行结账和对账
  • 资本公积金转增股本是利好吗
  • 招待费进项税额可以抵扣吗
  • 以货物抵应收账款的分录
  • 未认证发票进项怎么处理
  • 员工报销培训费怎么做账
  • mysql中的查询
  • sqlserver数据库事物日志已满
  • ubuntu怎么禁用nouveau
  • centos7怎么安装图形化界面
  • 如何关闭mac上的icloud
  • xp系统怎么安装网络驱动
  • 系统界面通知
  • win10的播放设置在哪
  • nodejs操作sqlserver
  • jquery操作html代码
  • nodejs调用java
  • html文件怎么用ie浏览器打开
  • 英语中our和my的区别
  • php操作dom
  • javascript+css3 实现动态按钮菜单特效
  • jqueryfor
  • python排序算法比较
  • wxpython怎么用
  • jquery.qtip提示信息插件用法简单实例
  • jquery技巧
  • 重庆电子税务局网页版登录
  • 税控盘连接服务器失败是什么原因黑盘发票无法上传
  • 海口市地税局高峰简历
  • 发货确认收入还是以开票确认收入
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设