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实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 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 危险函数解释 分析
2009/04/22 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
django实现用户登陆功能详解
2017/12/11 Python
python3实现字符串操作的实例代码
2019/04/16 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Python continue语句实例用法
2020/02/06 Python
如何在django中实现分页功能
2020/04/22 Python
python判断变量是否为列表的方法
2020/09/17 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
如何查找网页漏洞
2016/06/22 面试题
应聘美工求职信
2013/11/07 职场文书
迟到检讨书5000字
2014/01/31 职场文书
安全生产实施方案
2014/02/23 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
公司踏青活动方案
2014/08/16 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
司机个人年终总结
2015/03/03 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL