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_06_理解对象的创建过程
Oct 15 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
js中的this的指向问题详解
Aug 29 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
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
通用C#笔试题附答案
2016/11/26 面试题
优秀毕业生自我鉴定
2014/01/19 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
优秀大学生自荐信
2014/06/09 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书