JavaScript高级 |如何玩转箭头函数?

这篇具有很好参考价值的文章主要介绍了JavaScript高级 |如何玩转箭头函数?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文已收录于专栏
⭐️ 《JavaScript》⭐️

箭头函数

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

语法规则

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

names.forEach(function(item)){
	console.log(item);
})
  • 箭头函数的写法
names.forEach((item,idx,arr)=>{
  console.log(item,idx,arr);
	} 
)

js箭头函数for,JavaScript知识梳理,javascript,前端,react.js

setTimeout(()=>{
	console.log("setTimeout");
},3000)

简写规则

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

注意:在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)

例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()//window
foo.apply("aaa")//aaa

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

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

concat

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.toymoban.com/news/detail-796280.html

到了这里,关于JavaScript高级 |如何玩转箭头函数?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 15 JavaScript ES6中的箭头函数

    15 JavaScript ES6中的箭头函数 什么是箭头函数 ES6中允许使用=来定义函数。箭头函数相当于匿名函数,并简化了函数定义。 基本语法 箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=来定义函数,省去function。 函数的参数放在=前面的括号中,函数体跟在=后的

    2024年02月12日
    浏览(46)
  • 【JavaScript解析】ES6定义变量与箭头函数详解

    箭头函数可以说是ES6的一大亮点,使用箭头函数,可以简化编码过程,使代码更加的简洁 本文由千锋前端老师独家创作,主要给大家介绍了关于ES6中箭头函数的相关资料,文中通过实例代码介绍的非常详细,觉得有帮助的话可以【关注】持续追更~ 我们现在知道定义(声明)一个变

    2024年02月05日
    浏览(46)
  • JS 箭头函数 =>

    箭头函数是一种声明函数的 简洁 语法,它与普通函数并无本质的区别, 差异性更多体现在语法格式上。 目的 : 引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁 使用场景 : 箭头函数更适用于那些 本来需要匿名函数的地方 箭头函

    2024年01月18日
    浏览(43)
  • JS中的箭头函数

    在JavaScript中,箭头函数是一种简化的函数语法,它在ES6(ECMAScript 2015)引入。箭头函数的语法比传统的function表达式更简洁,同时还有一些特性,例如继承外部作用域的this值。 箭头函数的基本语法如下:   当箭头函数只有一个参数时,可以省略括号:   当函数体只包含一个

    2024年02月03日
    浏览(39)
  • javascript打飞机程序8x8x飞机大战js打飞机程序,飞机大战知识点包含了JavaScript面向过程的全部知识点,包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...

    讲解了JavaScript编程语言制作游戏界面,添加游戏控制、制作元素动画、制作多元素场景,添加碰撞功能、制作精灵动画等功能 源码如下: html:

    2024年02月16日
    浏览(64)
  • vue及js中使用function及箭头函数定义方法

    目录 1.函数声明,使用function 2.函数表达式,使用function 3.使用箭头函数方式 4.函数构造器 5.总结 1.函数声明,使用function 2.函数表达式,使用function 3.使用箭头函数方式 4.函数构造器 5.总结 在vue中,我们通过v-on指定来绑定要指定的方法,可以使用function或const箭头函数的方式

    2024年02月05日
    浏览(47)
  • 【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

    前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 addEventListener()方法,用于向指定元素添加事件句柄,它可以更简单的控制事件。语 法为: 第一个参数是 事件的类型 (如 “click”

    2024年01月19日
    浏览(43)
  • JavaScript高级二、构造函数&常用函数

    1、深入对象 (1)创建对象三种方式 利用对象字面量创建对象 利用 new Object 创建对象 利用构造函数创建对象 案例如下: (2)构造函数 **构造函数 :**是一种特殊的函数,主要用来 快速初始化 类似的 对象 构造函数语法 使用 new 调用函数的行为被称为 实例化 实例化

    2024年02月07日
    浏览(39)
  • JavaScript高级(六)---with和eval函数

     with 作用域只有全局作用域和函数作用域(块作用域暂时不提及), 使用with后有一个单独的作用域。不建议使用with语句,因为它可能是混淆错误和兼容性问题的根源。 eval eval是一个特殊的函数,它可以将传入的字符串当做JavaScript代码来运行。 不建议在开发中使用eval 可读性

    2024年04月11日
    浏览(34)
  • 探索JavaScript中的神秘函数:从基础到高级

    对于任何编程语言来说,函数都是其核心组成部分之一。在JavaScript中,函数更是无处不在,无论是在浏览器还是Node.js环境中,你都可以看到它们的身影。在本文中,我们将深入探讨JavaScript函数的基础和高级用法,以及如何有效地使用它们来编写更好的代码。 在JavaScript中,

    2024年02月10日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包