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

  • 数组常用的方法

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. 使用File、Path和Directory进行常见的操作

    我们偶尔会用到文件操作,其中File.Path和Directory这三个类是比较常见的,今天写了一个测试demo,也是顺便学习一下,记录一二. BTW,使用这几个类的时候需要引用using Syste ...

  2. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  3. js将格式化的时间转换成时间戳

    var timestamp1 = Date.parse(new Date(startTime)), timestamp2 = Date.parse(new Date(endTime));;consol ...

  4. php隔行换色输出表格

    <?php header("Content-type:text/html;charset=utf-8"); $str=''; $str.='<table border= ...

  5. MySQL NULL值

    我们已经看到SQL SELECT命令和WHERE子句一起使用,来从MySQL表中提取数据, 但是,当我们试图给出一个条件,比较字段或列值设置为NULL,它确不能正常工作. 为了处理这种情况,MySQL ...

  6. 用mybatis实现dao的编写或者实现mapper代理

    一.mybatis和hibernate的区别和应用场景hibernate:是一个标准的ORM框架(对象关系映射).入门门槛较高的,不需要写sql,sql语句自动生成了.对sql语句进行优化.修改比较困 ...

  7. 【Android Developers Training】 84. 将定期更新的影响最小化

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  8. tomcat7以上,ajax post参数后台获取不到的问题

    AJAX post传参后台获取不到查询参数. 网上找了各种方法,包括设置content-type,又是把json转成json格式字符串,问题依然存在,但是把post改成get又可以获取到,百思不得其解 ...

  9. Ajax获取数据的几种格式和解析方式

    一.什么是ajax  AJAX的全称是Asynchronous JavaScript and XML(是异步的 javascript 和 XML).  ajax不是新的编程语言,而是一种使用现有标准的 ...

  10. Java 多态透析 详细理解

    1:什么是多态 一个对象的多种状态 (老师)(员工)(儿子) 教师 a =老钟; 员工 b =老钟; 2:多态体现 父类引用变量指向了子类的对象          Father f = new Son ...