JavaScript的迭代函数与迭代函数的实现

前言

说到迭代方法,最先想到的是什么?forEach还是map,迭代的方法ES5提供了5种方法。

以下定义来自 JavaScript高级程序设计

每个方法都接收两个参数:

1.在每一项上运行的函数

2.运行该函数的作用域对象(影响this的值)

传入这些方法中的函数会接收3个参数:

1.数组项的值

2.该项在数组的位置

3.数组对象本身

迭代函数执行后可能会也可能不会影响返回结果 (雾..)

ES5提供的迭代函数:

  • forEach(): 对数组中的每一项运行给定函数,无返回值

  • every(): 对数组中的每一项运行给定函数,如果该函数每一项都返回true,则返回true

  • some(): 对数组中的每一项运行给定函数,如果该函数任意一项返回true,则返回true

  • map(): 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

  • filter(): 对数组中的每一项运行给定函数,该函数会返回true的项组成的数组

参数说明

forEach可以说是最常用的一个迭代方法了,该方法没有返回值,与for循环的效果一样。

顺便给大家推荐一个裙,它的前面是 537,中间是631,最后就是 707。想要学习前端的小伙伴可以加入我们一起学习,互相帮助。群里每天晚上都有大神免费直播上课,如果不是想学习的小伙伴就不要加啦。

forEach的第二个参数,js高程上说明 是运行该函数的作用域对象,可以看一下经典的例子:

 
 

如果这么写看不太懂的话,看箭头函数的写法一下子就能明白。

 
 

every(判断函数)

对数组中的每一项运行给定函数,如果该函数每一项都返回true,则返回true。

 默认返回false 

 
 

 全部ture才会返回true 

 

some(判断函数)

对数组中的每一项运行给定函数,如果该函数任意一项返回true,则返回true。

 默认返回false 

 
 

 全部false才会返回false 

 
 

以上两个都不是很常用,但是毫无疑问在特定的需求下,这个要比用forEach代码要简洁很多。

filter(过滤函数)

对数组中的每一项运行给定函数,该函数会返回true的项组成的数组。

 
 

上面的例子,array数组里面大于5的数会被过滤出来,filter函数在日常当中比较常用。

map(处理函数)

对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

 
 

forEach(迭代函数)

对数组中的每一项运行给定函数,无返回值。

 
 

最纯粹的迭代函数,似乎forEach是处理外部数组最好的选择。

到这里,我想起了我第一次使用filter函数的时候,我惊呆了,这函数太强大了!

顺便给大家推荐一个裙,它的前面是 537,中间是631,最后就是 707。想要学习前端的小伙伴可以加入我们一起学习,互相帮助。群里每天晚上都有大神免费直播上课,如果不是想学习的小伙伴就不要加啦。

如此好用的工具函数,不自己实现一遍怎么能做到完全了解。

以下函数为自己实现的,并不是源码,若有错误请指点!

实现forEach

首先明显forEach是Array上的原型链上的函数所以第一件事就是创建一个原型方法:

 
 

forEact 第一个参数为一个匿名函数 第二个参数为this指向 所以:

 
 

forEach会迭代调用它的数组所以内部肯定是循环:

 
 

但是我们还没有考虑this指向的事情,所以还需要添加一些调整this的代码:

 
 

运行一下试试,就用之前的例子:

 
 

实现map

map与forEach的区别是:

1.map中如果是运算,会返回每次函数调用的新的结果组成的数组

2.map中如果是判断,会返回每次迭代结果组成的数组

所以只要在迭代函数内部创建一个数组,每次迭代都push进去,最后返回出去就好啦。

 
 

运行一下:

 
 

实现 some every

some与every都会有一个特点 默认返回false。

不同的地方在于:

1.some要求 全部返回false返回false

2.every要求 全部返回true返回true

 
 

实现fliter

相信到这里,你也可以直接实现一个fliter函数了,仅仅是多添加一个数组。

 
 

原来很多东西,并没有想象的那么复杂。
 

*  作者:小绿和小蓝

*  原文地址:https://juejin.im/post/5c331657e51d4551e325d6b4

*  声明:转载文章和图片均来自公开网络,版权归作者本人所有。如果出处有误或侵犯到原作者权益,请与我们联系删除或授权事宜。

猜你喜欢

转载自blog.csdn.net/liangjielaoshi/article/details/89282884