最近工作中经常涉及到数据的处理,数组尤其常见,经常需要对其进行遍历、转换操作,网上的文章零零散散,不得已自己又找出红宝书来翻出来看,顺便记一笔,便于以后查询。

  • 数组常用的方法

ECMAScript5为数组定义了8个迭代方法。每个方法都接受两个参数:要在每一项上运行的函数fn和(可选的)运行该函数的作用域对象——影响 `this` 的值。

传入这些方法中的函数(fn)会接收3个参数:item 、index 、array; 如:

array.forEach(function(item,index,array){
//do your staff here;
},this)

根据使用方法的不同,这个函数执行后的返回值,可能会/不会影响方法中的返回值。

  这5个迭代方法作用及返回值概览如下(末尾补充另外3个):

ECMAScript5 Array元素迭代方法
方法名 方法作用  返回值
every() 针对数组中每一项元素运行指定函数 Boolean:若每一项都返回true,返回true;
filter() 针对数组中每一项元素运行指定函数, Array:   返回函数运行返回true的元素组成的新数组
forEach() 针对数组中每一项元素运行指定函数 null:  无返回值
map() 针对数组中每一项元素运行指定函数  Array:  返回函数运行后,得到到新新元素组成的新数组
some() 针对数组中每一项元素运行指定函数 Boolean: 若有任意一项执行函数后返回true, 则返回true

简单来说:

every() 、some() 方法适合用于对数组元素进行条件判断;

filter()  、map() 方法适合用于对数组进行条件筛选/再处理;

forEach() 方法对不对数组本身做操作,仅仅对数组元素的二次应用;

下面介绍下各个方法的使用栗子:

先来假设一个场景,你拿到了公司的本月工资清单,假设你的工资为9000;公司员工工资组成的数组为salaries=[8500,12000,9900,9000],

a. 想知道 你的工资是不是最低的;

b.想知道 有没有人和你工资一样多;

c.想知道  是不是所有人待遇都一样;

d.想      把大家的工资都换成K为单位的数据

 var a,b,c,d;
var your=9000;
var salaries=[8500,12000,9900,9000];
a=salaries.some(function(item,index,array){
return item<9000
});
console.log(a);//true;恭喜你,还有人比你工资更低 b=salaries.filter(function(item,index,array){
return item== your;
})
console.log(b);//[9000] 呵呵,有人跟你待遇一样 c=salaries.every(function(item,index,array){
return item==your;
});
console.log(c);//false .不是所有人都和你一样待遇哦 d=salaries.map(function(item,index,array){
return item/1000
});
console.log(d);//[8.5,12,9.9,9]

PS:补充三个遗漏的方法

1.array.reduce(callback,[initalValue]):归并函数——对每个数组元素执行回调函数,返回最后一次调用结果值

    //此处回调函数有4个参数,其中第4个参数可选;即calback(accumulator,value,index,array,initalValue)

2.Array.find(callback[,thisArg]):查找函数——返回第一个通过测试的元素

3.Array.findIndex(callback[,Arg]):查找函数——返回第一个通过测试的元素的索引值

看完这些是否觉得以后再也不需要for循环了,那么看看下面这个坑吧:

[1,2,3].map(parseInt);//[1,NaN,NaN]

//注意:
//1.Array.map(iterm,index,array)
//2.parseInt(value,base)

JavaScript数组遍历(迭代)方法 8种的更多相关文章

  1. JavaScript 数组遍历方法的对比

    JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 ,,,] , len ...

  2. JS中数组的迭代方法和归并方法

    昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...

  3. js 判断数组包含某值的方法 和 javascript数组扩展indexOf()方法

    var  questionId = []; var anSwerIdValue = []; ////javascript数组扩展indexOf()方法 Array.prototype.indexOf ...

  4. JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of

    JavaScript中有非常多数组迭代方法,这里基本上吧所有的都介绍全了,我项目中比较喜欢的是forEach. 7.for in (for-in循环实际是为循环对象而设计的,for in也可以循环数组 ...

  5. 一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some

    好吧,竟然不能单发一张图,不够200字啊不够200字! 在<JavaScript高级程序设计>中,分门别类介绍了非常多数组方法,其中迭代方法里面有6种,这6种方法在实际项目有着非常广泛的作 ...

  6. javascript数组遍历的几种常用方法性能分析对比

    前言: 数组遍历有很多种方法,虽然不同方法有不同的特性及适用环境,除了普通飞for循环之外,for...in能直接输出数组元素的索引,for...of能直接输出数组元素的值,map则可以直接生成新的数 ...

  7. JavaScript:常用的一些数组遍历的方法

    常用的一些遍历数组的方法: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. JavaScript之数组五大迭代方法总结

    ES5定义了五个迭代方法,每个方法都接收两个参数:要在每一项上运行的函数和运行该函数的作用域对象(可选的),作用域对象将影响this的值.传入这些方法中的函数会接收三个参数:数组的项的值.该项在数组中 ...

  9. JavaScript数组去重—ES6的两种方式

    说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...

随机推荐

  1. uwp版的音乐播放器练手

    UWP项目之音乐播放器 这个项目本来是我女朋友的一个小作业,她做不出来,结果只能是我来代劳.经过几天的时间虽然赶出来了,但是自己不是很满意,还有很多不满意的地方,因此决定在最近的一段时间内,重新完成. ...

  2. MVC过滤器之添加LoginAttribute,浏览器bug:重定向次数太多

    以前在写登录Action过滤时,都在每个Controller前写上CheckLoginAttribute:这次决定偷懒试一下能否将所有Action和Controller统一过滤: 出bug的代码是这样 ...

  3. 枚举:enum——初写

    入门的时候,针对某一字段状态的判断,一开始是在前端用if else 判断,有一些弊端:①把内置的code暴露给用户②if else最好不要超过3层③前端很长一段冗余判断不规范后改进使用枚举,在后台进行 ...

  4. Openfire的web插件开发

    概要 Openfire不仅支持普通插件开发,还支持完整的web插件开发,这次就web插件开发做一个小的实例,本文主要讲解如何加入Servlet和Jsp页面,基本插件的开发请参照上一篇文章. 准备 系统 ...

  5. JavaScript学习笔记(二)——选项卡小结

    Js制作选项卡小结 1.先构思好需要展示的页面效果,比如这样 2.需要显示的效果通过html和css制作出来,包括选项(第一课.第二课)的鼠标停留背景变色.下方选项页内容切换的内容等. 3.把此选项卡 ...

  6. 全选与单选chekbox的自定义实现(angular框架)

    2017年7月4日,我原本可以像其他同时一样早点回家,玩几把王者荣耀,但是我没有,因为我选择留下来,写一篇博客. 项目中经常性的会遇到什么点击"全选"按钮,勾中所有"单选 ...

  7. Linux系统安全配置基线

    一:共享账号检查 配置名称:用户账号分配检查,避免共享账号存在 配置要求:1.系统需按照实际用户分配账号: 2.避免不同用户间共享账号,避免用户账号和服务器间通信使用的账号共享. 操作指南:参考配置操 ...

  8. OpenGL的配置与搭建

    一.项目中所使用的OpenGL扩展库有: 1. freeglut-3.0.0 2. glew-2.0.0 3. glm-0.9.7.3 二.添加扩展库文件 在工程项目文件夹里面添加OpenGLExte ...

  9. python机器学习实战(二)

    python机器学习实战(二) 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7159775.html 前言 这篇noteboo ...

  10. Hihocoder 1325 平衡树·Treap(平衡树,Treap)

    Hihocoder 1325 平衡树·Treap(平衡树,Treap) Description 小Ho:小Hi,我发现我们以前讲过的两个数据结构特别相似. 小Hi:你说的是哪两个啊? 小Ho:就是二叉 ...