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 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...
随机推荐
- python网络爬虫之使用scrapy自动爬取多个网页
前面介绍的scrapy爬虫只能爬取单个网页.如果我们想爬取多个网页.比如网上的小说该如何如何操作呢.比如下面的这样的结构.是小说的第一篇.可以点击返回目录还是下一页 对应的网页代码: 我们再看进入后面 ...
- 如何使用Node.js编写命令工具——以vue-cli为例
vue-cli全局安装之后,提供了vue命令和vue init.vue list.vue build三个子命令,通过命令可以搭建基于vue.js的脚手架项目.本文简单介绍一下这些命令是如何实现的. v ...
- Swift字符串插值
字符串插值是一种全新的构建字符串的方式,可以在其中包含常量.变量.字面量和表达式.您插入的字符串字面量的每一项都被包裹在以反斜线为前缀的圆括号中: let multiplier = let messa ...
- js脚本中try与cache捕获异常处理
<script type="text/javascript"> function add_reason(elm){ try{ var pp=$('.pp').val() ...
- CSS学习笔记05 display属性
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...
- 【Android Developers Training】 102. 序言:让你的应用获知地点
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 门控开关项目--整流桥分析,LED限流电阻选择
完整的原理图 常见电阻 常见的精度分为5% 和1%精度,碳膜电阻5%精度,金属膜电阻1%精度. 常见的阻值有 10R, 100R, 330R, 1K, 2K, 3K, 5.1K, 10K, 15K, ...
- Chrome DevTools 调研笔记
1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2 Elements 2.1 功能 检查和实时更新页面的HTML与C ...
- 外部世界如何访问容器? - 每天5分钟玩转 Docker 容器技术(37)
上节我们学习了容器如何访问外部网络,今天讨论另一个方向:外部网络如何访问到容器? 答案是:端口映射. docker 可将容器对外提供服务的端口映射到 host 的某个端口,外网通过该端口访问容器.容器 ...
- Java自学手记——struts2
struts2框架 struts2是一种基于MVC模式的框架,是在struts1的基础上融合了xwork的功能. struts2框架预处理了一些功能: >请求数据自动封装, >文件上传的功 ...