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页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
使用vant的地域控件追加全部选项
Nov 03 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
php rsa加密解密使用详解
2015/01/14 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
html下载本地
2006/06/19 Javascript
Ajax::prototype 源码解读
2007/01/22 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
自考生自我评价分享
2014/01/18 职场文书
高一政治教学反思
2014/01/28 职场文书
入学生会自荐书范文
2014/02/05 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis