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 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
GD输出汉字的函数的分析
2006/10/09 PHP
MySQL数据源表结构图示
2008/06/05 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP PDO函数库详解
2010/04/27 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
vuex 的简单使用
2018/03/22 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
Python实现的栈(Stack)
2018/01/26 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
高中自我评价分享
2013/12/05 职场文书
重阳节登山活动方案
2014/02/03 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL