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 相关文章推荐
Javascript Request获取请求参数如何实现
Nov 28 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
简单实现JS计算器功能
Dec 21 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 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
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
js日历功能对象
2012/01/12 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python实现下载文件的三种方法
2017/02/09 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Random 在 Python 中的使用方法
2018/08/09 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
Pytorch之parameters的使用
2019/12/31 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
航海技术专业毕业生推荐信
2014/07/09 职场文书
碧霞祠导游词
2015/02/09 职场文书
走进毛泽东观后感
2015/06/04 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
行为习惯主题班会
2015/08/14 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS