前言
说到迭代方法,最先想到的是什么?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
* 声明:转载文章和图片均来自公开网络,版权归作者本人所有。如果出处有误或侵犯到原作者权益,请与我们联系删除或授权事宜。