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 vvorld 在线加密破解方法
Nov 13 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
node.js事件轮询机制原理知识点
Dec 22 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.MVC的模板标签系统(二)
2006/09/05 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
python Crypto模块的安装与使用方法
2017/12/21 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python scatter函数用法实例详解
2020/02/11 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
教师绩效工资方案
2014/02/01 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
MySQL创建管理KEY分区
2022/04/13 MySQL