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模拟多线程
Feb 07 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
JS实现简易计算器
Feb 14 Javascript
详解vue 组件的实现原理
Nov 12 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调用数据库的存贮过程!
2006/10/09 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
php 数据结构之链表队列
2017/10/17 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
javascript常见用法总结
2014/05/22 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
Python 字符串定义
2009/09/25 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
python 录制系统声音的示例
2020/12/21 Python
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
关于廉洁的广播稿
2014/01/30 职场文书
招聘专员岗位职责
2014/03/07 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2014年稽查工作总结
2014/12/20 职场文书
2016年清明节寄语
2015/12/04 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
使用Ajax实现无刷新上传文件
2022/04/12 Javascript