对一个数组 FILTER、SOME、MAP、FOREACH的操作分别有什么作用？

大家好，我是IT修真院深圳分院第九期的学员徐炜，一枚正直纯洁善良的前端程序员。今天给大家带来的是如何实现侧边栏高亮？

一.背景介绍

     使用JavaScript数组常常需要对数组进行遍历、迭代操作。而我们常用的就是for语句对数组进行迭代。在ES5已经为数组定义了5个迭代的方法，分别是：filter、some、map、foreach、every。

二.知识剖析  

     1、ECMAScript5为数组定义了5个迭代方法，每个方法都接收两个参数：（1）要在每一项上运行的函数。（2）运行该函数的作用域对象。

     2、传入这些方法中的函数会接收三个参数：（1）数组项的值。（2）该项在数组中的位置。（3）数组对象本身。

     3、五种迭代方法：

   （1）filter()是对数组中的每一项运行给定函数，返回该函数会返回true的项所组成的数组。

   （2）map()是对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

   （3）forEach() 是多数组中的每一项运行给定函数，这个方法没有返回值。它只是对数组中的每一项运行传入的函数，没有返回值。本质上与使用for循环迭代数组一样。

   （4）every()是对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

   （5）some()是对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。

三.常见问题

  迭代和遍历、循环、递归有什么区别？

四.解决方案

  （1）循环(loop)：指的是在满足条件的情况下，重复执行同一段代码。一般语言都会有三种类型的循环语句:for语句、while语句和do While语句。可以理解为：循环就是迭代(重复)一些命令的代码块, 如果循环控制条件不满足的话, 就结束循环。

  （2）迭代（iterate）：指的是利用计算机运算速度快、适合做重复性操作的特点， 让计算机对一组指令(或一定步骤)进行重复执行，在每次执行这组指令(或这些步骤)时，都从变量的原值推出它的一个新值。

  （3）遍历（traversal）：指的是树形结构的一种重要运算，指的是按照一定的规则访问树形结构中的每个节点，而且每个节点都只访问一次。

  （4）递归(recursion)：是指在函数的定义中使用函数自身的方法。 递归一词还较常用于描述以自相似方法重复事物的过程。例如，当两面镜子相互之间近似平行时，镜中嵌套的图像是以无限递归的形式出现的，可以理解为：指的是一个函数不断调用自身的行为。

五.编码实战

 实战演示demo，详见视频。

六.扩展思考

JS中迭代和遍历有什么区别?

1、自己调用自己的方法，或者称递归。很多程序有迭代器。这是一种用于“遍历”数组的工具对象。一般遍历一个数组都是使用循环变量从0到最后一个，或者使用链表遍历量表中内容。使用迭代器可以不关注数组的具体实现方式，遍历数组中所有成员。
2、遍历：对数据结构中每一个成员都进行一次访问的操作就是遍历。比如遍历列表。最为常见得问题是遍历树，遍历树的常见方法有：先序/中序/后序，或者按照另一个纬度划分有，广度遍历和深度遍历。

七.参考文献

参考一：js 数组迭代方法，归并方法；

参考二：AngularJS ng-class 指令；

参考三：编程中，循环、迭代、遍历和递归之间的区别；

八.更多讨论

问题一：相对于for()，JS数组自定义的数组迭代方式有哪些好处？这里面参数item、index和array代表的是什么 ？

答：在实现相同功能的前提下，后者除了能够节省代码量外，在实现某些功能上的流程中存在很多有意思的优势，比如forEach相比普通的for循环的优势在于对稀疏数组的处理，会跳过数组中的空位。for+i在性能测试上是优越于后者，但是前提是，array的length要事先计算出来，而在处理非常大量的数据时候，后者的优势就显而易见了。

问题二： 相对于for()，JS数组自定义的数组迭代方式有哪些好处？

答：第一是forEach代码写起来比较清晰，不用再次用索引去定位需要循环的元素。第二是forEach的索引是独立的，不容易出现问题。

问题三：进行迭代操作原来的数组会发生变化么？

答：原来的数组不会发生变化，会生成一个新的数组存储函数运行之后的结果。

 PPT 视频链接

  感谢陈静雯师姐、和钟楚炯师兄，此教程是在他们之前技术分享的基础上完善而成。 

  今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~