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的不规则矩形的排列实现代码
Apr 16 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
js判断密码强度的方法
Mar 18 Javascript
vue element和nuxt的使用技巧分享
Jan 14 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python安装与基本数据类型教程详解
2019/05/29 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python 自由定制表格的实现示例
2020/03/20 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
python中K-means算法基础知识点
2021/01/25 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
DTD的含义以及作用
2014/01/26 面试题
电气自动化专业职业规划范文
2014/02/16 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers