JavaScript数组迭代方法


Posted in Javascript onMarch 03, 2017

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

数组常用的迭代方法

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

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

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

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

这5个迭代方法作用及返回值概览如下:

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;
var your=9000;
var salaries=[8500,12000,9900,9000];
 a=slaries.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]

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
vue.js的提示组件
Mar 02 #Javascript
js实现功能比较全面的全选和多选
Mar 02 #Javascript
jQuery实现三级联动效果
Mar 02 #Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 #Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 #Javascript
JSONP跨域请求
Mar 02 #Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 #Javascript
You might like
用PHP连接Oracle数据库
2006/10/09 PHP
杏林同学录(二)
2006/10/09 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
php的memcached客户端memcached
2011/06/14 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP实现文件下载详解
2014/11/27 PHP
php中return的用法实例分析
2015/02/28 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
python实现百度关键词排名查询
2014/03/30 Python
Python实现的爬虫功能代码
2017/06/24 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python多进程使用函数封装实例
2020/05/02 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
python中filter,map,reduce的作用
2022/06/10 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript