
遍历JavaScript中的数组-如此有用,如此简单,如此容易被误解。 forEach中实际发生了什么? 地图如何运作? 减少和过滤功能是什么?
每个数组都带有在原型上构建的forEach,Map,Reduce,Filter等方法。 将这些功能视为理所当然很容易,但这并不是JavaScript起作用的魔力-我们可以自己构建这些功能。 从头开始执行这些功能有助于巩固我对方法的理解,并在将来更加准确地使用它们。
每次
Array.prototype.forEach()
从Mozilla文档中:
forEach() 方法每个数组元素执行一次提供的函数。
forEach接受两个参数:要对其进行迭代的数组和一个回调函数,该函数对元素进行实际操作。
回调函数采用三个参数:
- currentValue —数组中正在处理的当前值(在Ruby中,这是方括号之间的变量)
- 指数
- 数组本身
这是forEach的喜庆示例:

如您所见,我们正在遍历holidayJoy数组,并在编号整齐的列表中打印出每个元素及其索引(+1,因为索引从0开始)。 现在假装我们生命中没有每一个人。 我们将如何执行相同的操作?
我们将函数命名为forEach,它将接受两个参数:数组和回调(如内置的forEach)。 然后,我们将使用for循环遍历数组,因为那是迭代,对吗? 一堆循环?

在我们的for循环中,i是索引。 我们首先将其设置为零,使循环遍历函数的次数与数组长度一样(击中所有元素),并每次使索引递增1。
同样,callback采用三个参数:当前值,索引和数组。 由于这起初使我感到困惑,所以让我们看一下回调是如何工作的:
第一次将array [i]视为array [0]。 这就是我们访问数组中第一项的方式,对吗? 然后,随着循环的重复,数组的索引增加到array [1],array [2]等,以便我们访问每个元素并对该元素执行回调。
请注意,forEach不返回任何内容。 它仅对数组的每个元素执行回调函数,但对结果不做任何事情。 在不需要返回新的,经过修改的数组的情况下,forEach非常有用-这就是map出现的地方!
地图
Array.prototype.map()
现在,让我们从头开始编写Map。 从Mozilla文档中:
map() 方法创建一个新数组,并对该数组中的每个元素调用提供的函数。
这听起来可能会令人困惑,所以让我们逐步查看一下地图:
- 接受一个数组和一个回调函数
- 将函数应用于数组中的每个元素
- 跟踪遍历数组的每个循环的结果
- 返回具有这些结果的新数组
请注意,map 不会修改原始数组,但会返回带有回调函数结果的新数组。
这是从头开始构建的地图功能:

让我们解压缩这里发生的事情:
我们有一个myMap函数,它带有两个参数-数组和回调。 我们将变量returnValue设置为一个空数组,因为稍后我们将必须返回一个包含回调结果的新数组。
我们有一个for循环,其功能与上述forEach类似,不同的是,在每个循环中,我们都将回调的结果设置为一个名为newElements的变量。
最后,我们将newElements逐一推送到returnValue数组中,然后在函数末尾返回该数组。
繁荣,那就是JavaScript中的地图。
资源资源
这是一篇很棒的综合文章,以易于理解的术语分解了地图:https://www.discovermeteor.com/blog/understanding-javascript-map/