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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
JavaScript中return false的用法
Mar 12 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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图片加水印实现方法
2016/05/06 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
深入了解js原型模式
2019/05/30 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
JPA面试常见问题
2016/11/14 面试题
优秀学生党员先进事迹材料
2014/05/29 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
出差报告怎么写
2014/11/06 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
Python中else的三种使用场景
2021/06/16 Python
关于vue-router-link选择样式设置
2022/04/30 Vue.js