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中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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
建立动态的WML站点(三)
2006/10/09 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
python实现2014火车票查询代码分享
2014/01/10 Python
Python的装饰器用法学习笔记
2016/06/24 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
python3中sys.argv的实例用法
2020/04/24 Python
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python
python文件与路径操作神器 pathlib
2022/04/01 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技