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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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开发中常用的8个小技巧
2008/08/27 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
金融管理毕业生求职信
2014/03/03 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
购房意向书
2014/08/30 职场文书
个人收入证明模板
2014/09/18 职场文书
2014年纪检工作总结
2014/11/12 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
电影建党伟业观后感
2015/06/01 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers