JavaScript数组迭代的五种方式

1.背景介绍

使用JavaScript数组常常需要对数组进行遍历、迭代操作。而我们常用的就是for语句对数组进行迭代。然而在ECMAscript5已经为数组定义了5个迭代的方法,分别是:filter、some、map、foreach、every,下面我们讲讲它们的具体作用。

2.知识剖析

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

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

为了加深对它们的理解,以上两个迭代方式有必要放在一起demo,

some+every demo

some+every console结果

通过 demo,可以看出 every() ,在遍历数组项的时候,第一项的值就已经为false了,所以直接返回false不再继续执行后面的迭代;

第二个,some() ,在遍历数组项的时候,当第一个满足函数体的项出现,就直接返回true,并且不再执行后面的迭代;

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

filter demo

filter console结果

通过demo,可以看出 filter() 把原数组arr每一项返回为true的项,重新组成数组,并打印出该数组每个索引的值和数组长度;

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

man demo

man console结果

通过demo可以看出 map() 把原数组arr的每一项迭代返回的结果,重新组成数组,并打印出该数组每个索引的值和数组长度;

2.4、forEach():对数组中的每一项运行给定函数,这个方法并没有返回值 ;

forEach demo

forEach console 结果

通过demo可以看出 forEach() ,只是对每个数组项运行指定的函数体,这个迭代方式并没有返回值;

3.常见问题

如何判断两个数组中相同的项,然后将相同的部分或者不同的部分生成新的数组?

4.解决方案

var num1 = [1,2,3,4,5,7];

var num2 = [2,3,5];

var nums = num1.filter(function(aaa){

return num2.indexOf(aaa) >= 0;

});

console.log(nums);

5.扩展思考

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

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

答:传入这些方法中的函数会接收三个参数,item表示遍历后的当前对象,里面的index代表当前循环到第几个索引,array代表数组对象本身;

6.参考文献

JavaScript高级程序设计第三版

W3Cschool JavaScript教程

网络搜索引擎

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,275评论 0 4
  • 数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引。 JavaScript...
    劼哥stone阅读 1,159评论 6 20
  • 没钱做什么都感觉底气不足。 努力打好技术基础,积累资金,赚钱赚钱赚钱。 牵挂太多,心才会那么累。 学习记录:字符串...
    阿元阅读 154评论 0 0
  • 情绪每个人都有,但是,不是每个人都能控制好自己的情绪 。 01 朋友A是...
    小小青橙阅读 246评论 2 3
  • 图像标签( )和源属性(Src) 在 HTML 中,图像由 标签定义。 是空标签,意思是说,它只包含属性,并且...
    枫羽望空阅读 768评论 0 1