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

  • 数组常用的方法

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. @JsonIgnoreProperties忽略转换到json的属性

    bean转换到json忽略指定属性 @JsonIgnoreProperties(value={"attrName"})

  2. SOD开源框架MSF(消息服务框架)介绍

    前言:之前想做消息的广播,拖着就忘记了,现在拿了医生的框架来学习,就按实现了之前想实现的功能. 传送门http://www.cnblogs.com/bluedoctor/,框架的获取,按传送门的链接就 ...

  3. linux+tomcat+jdk环境验证码无法显示

    我的环境配置:RHEL6.5+tomcat6+jdk1.6 今天遇到一个奇怪的现象,我的tomcat启动起来之后,网站无法显示验证码,导致无法登陆.我的tomcat启动过程是这样的: 我有一个进程守护 ...

  4. 2.如何安装vmvare tools

    1.在主页点击虚拟机 重装vmvaretools,接着就会下载tar.gz包 2.cd 到解压包的地方,解压sudo tar zxf ... 3.解压之后会生成一个vmvare-toos-distri ...

  5. vsftpd3.0之匿名用户配置

    有时候工作中为了方便上传下载文件,又不想在系统中添加用户并为用户创建密码,这时候就可以用匿名用户方式搭建FTP服务器,当然安全性我们不说,今天就为实现这么个简单而粗爆的FTP服务器,来看看都需要哪些配 ...

  6. TCP错误恢复特性之一TCP重传

    TCP的错误恢复特性是我们用来定位.诊断并最终修复网络高延迟的最好工具. 常见的TCP错误恢复特性有:TCP重传.TCP重复确认和快速重传 1. TCP重传: 重传数据包是TCP最基本的错误恢复特性之 ...

  7. Command "python setup.py egg_info" failed with error code 10

    1:今天系统重装以后,下载了新的版本的python3.6.1.然后想通过pycurl模块测试URL,突然发现windows10下我无法通过pip安装pycurl模块了,报错内容如下 Collectin ...

  8. 取得system32文件夹下面文件的写入权限

    取得system32文件夹下面文件的写入权限 TAKEOWN /F %SystemRoot%\system32\riched32.dll ICACLS %SystemRoot%\system32\ri ...

  9. JPush简单Java服务端案例实现

    一.激光推送准备工作 1.注册极光推送开发者账号,创建应用: 2.完成推送设置,填写应用名提交生成安装包: 3.扫码安装简单的测试apk,查看应用信息会有AppKey和Master Secret用于推 ...

  10. Docker 部署DropWizard

    FROM index.alauda.cn/alauda/ubuntu MAINTAINER hongxiao.shou "shouhongxiao@163.com" COPY jd ...