JavaScript数组遍历(迭代)方法 8种
最近工作中经常涉及到数据的处理,数组尤其常见,经常需要对其进行遍历、转换操作,网上的文章零零散散,不得已自己又找出红宝书来翻出来看,顺便记一笔,便于以后查询。
数组常用的方法
ECMAScript5为数组定义了8个迭代方法。每个方法都接受两个参数:要在每一项上运行的函数fn和(可选的)运行该函数的作用域对象——影响 `this` 的值。
传入这些方法中的函数(fn)会接收3个参数:item 、index 、array; 如:
array.forEach(function(item,index,array){
//do your staff here;
},this)根据使用方法的不同,这个函数执行后的返回值,可能会/不会影响方法中的返回值。
这5个迭代方法作用及返回值概览如下(末尾补充另外3个):
方法名 | 方法作用 | 返回值 |
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种的更多相关文章
- JavaScript 数组遍历方法的对比
JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 ,,,] , len ...
- JS中数组的迭代方法和归并方法
昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...
- js 判断数组包含某值的方法 和 javascript数组扩展indexOf()方法
var questionId = []; var anSwerIdValue = []; ////javascript数组扩展indexOf()方法 Array.prototype.indexOf ...
- JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of
JavaScript中有非常多数组迭代方法,这里基本上吧所有的都介绍全了,我项目中比较喜欢的是forEach. 7.for in (for-in循环实际是为循环对象而设计的,for in也可以循环数组 ...
- 一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some
好吧,竟然不能单发一张图,不够200字啊不够200字! 在<JavaScript高级程序设计>中,分门别类介绍了非常多数组方法,其中迭代方法里面有6种,这6种方法在实际项目有着非常广泛的作 ...
- javascript数组遍历的几种常用方法性能分析对比
前言: 数组遍历有很多种方法,虽然不同方法有不同的特性及适用环境,除了普通飞for循环之外,for...in能直接输出数组元素的索引,for...of能直接输出数组元素的值,map则可以直接生成新的数 ...
- JavaScript:常用的一些数组遍历的方法
常用的一些遍历数组的方法: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- JavaScript之数组五大迭代方法总结
ES5定义了五个迭代方法,每个方法都接收两个参数:要在每一项上运行的函数和运行该函数的作用域对象(可选的),作用域对象将影响this的值.传入这些方法中的函数会接收三个参数:数组的项的值.该项在数组中 ...
- JavaScript数组去重—ES6的两种方式
说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...
随机推荐
- uwp版的音乐播放器练手
UWP项目之音乐播放器 这个项目本来是我女朋友的一个小作业,她做不出来,结果只能是我来代劳.经过几天的时间虽然赶出来了,但是自己不是很满意,还有很多不满意的地方,因此决定在最近的一段时间内,重新完成. ...
- MVC过滤器之添加LoginAttribute,浏览器bug:重定向次数太多
以前在写登录Action过滤时,都在每个Controller前写上CheckLoginAttribute:这次决定偷懒试一下能否将所有Action和Controller统一过滤: 出bug的代码是这样 ...
- 枚举:enum——初写
入门的时候,针对某一字段状态的判断,一开始是在前端用if else 判断,有一些弊端:①把内置的code暴露给用户②if else最好不要超过3层③前端很长一段冗余判断不规范后改进使用枚举,在后台进行 ...
- Openfire的web插件开发
概要 Openfire不仅支持普通插件开发,还支持完整的web插件开发,这次就web插件开发做一个小的实例,本文主要讲解如何加入Servlet和Jsp页面,基本插件的开发请参照上一篇文章. 准备 系统 ...
- JavaScript学习笔记(二)——选项卡小结
Js制作选项卡小结 1.先构思好需要展示的页面效果,比如这样 2.需要显示的效果通过html和css制作出来,包括选项(第一课.第二课)的鼠标停留背景变色.下方选项页内容切换的内容等. 3.把此选项卡 ...
- 全选与单选chekbox的自定义实现(angular框架)
2017年7月4日,我原本可以像其他同时一样早点回家,玩几把王者荣耀,但是我没有,因为我选择留下来,写一篇博客. 项目中经常性的会遇到什么点击"全选"按钮,勾中所有"单选 ...
- Linux系统安全配置基线
一:共享账号检查 配置名称:用户账号分配检查,避免共享账号存在 配置要求:1.系统需按照实际用户分配账号: 2.避免不同用户间共享账号,避免用户账号和服务器间通信使用的账号共享. 操作指南:参考配置操 ...
- OpenGL的配置与搭建
一.项目中所使用的OpenGL扩展库有: 1. freeglut-3.0.0 2. glew-2.0.0 3. glm-0.9.7.3 二.添加扩展库文件 在工程项目文件夹里面添加OpenGLExte ...
- python机器学习实战(二)
python机器学习实战(二) 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7159775.html 前言 这篇noteboo ...
- Hihocoder 1325 平衡树·Treap(平衡树,Treap)
Hihocoder 1325 平衡树·Treap(平衡树,Treap) Description 小Ho:小Hi,我发现我们以前讲过的两个数据结构特别相似. 小Hi:你说的是哪两个啊? 小Ho:就是二叉 ...