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 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
vue实现简单的登录弹出框
Oct 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
python opencv读mp4视频的实例
2018/12/07 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
高级工程师岗位职责
2013/12/15 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
人事经理岗位职责
2014/04/28 职场文书
婚前协议书范本
2014/10/27 职场文书
2016党员入党决心书
2015/09/22 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python