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 相关文章推荐
js 编写规范
Mar 03 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
简单实现js上传文件功能
Aug 21 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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
用Flash图形化数据(一)
2006/10/09 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
pandas值替换方法
2018/07/10 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android