浅谈javascript 迭代方法


Posted in Javascript onJanuary 21, 2015

ECMAScript5为数组定义了5个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象(即影响this的值)。传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。根据使用方法的不同,这个函数执行后的返回值可能会也可能不会影响方法的返回值。这5个迭代方法是:

五个迭代方法 都接受两个参数:要在每一项上运行的函数 和 运行该函数的作用域(可选)

        every():对数组中的每一项运行给定函数。如果函数对每一项都返回true,则返回true。
        filter():对数组中的每一项运行给定函数。返回该函数会返回true的项组成的数组。
        forEach():对数组中每一项运行给定函数。该函数没有返回值。
        map():对数组中每一项运行给定函数。返回每次函数调用的结果组成的函数。
        some():对数组中每一项运行给定函数。如果函数对 任一项返回true,则返回true

以上所有的方法都不会修改数组中包含的值。

在上面的方法中,every()和some()非常相似,它们都用于查询数组中的项是否满足某个条件。对于every()方法来说,传入的函数必须对每一项都返回true,这个方法才返回true。否则,它就返回false。而some()方法则是只要传入的函数对数组的某一项返回true,就会返回true。例如:

var nums = [1,2,3,4,5,4,3,2,1];
var result = nums.every(function(item, index, array){
 return (item > 2);
})
console.info(result);

上面的代码会在控制台中打印false。

var nums = [1,2,3,4,5,4,3,2,1];
var result = nums.some(function(item, index, array){
 return (item > 2);
})
console.info(result);

上面的代码会在控制台中打印true。

下面是一个filter()函数的例子,它利用指定的函数确定是否存在返回的数组中包含某一项。例如,要返回一个所有数值都大于2的数组,可以使用下面的代码:

var nums = [1,2,3,4,5,4,3,2,1];
var result = nums.filter(function(item, index, array){
 return (item > 2);
})
console.info(result);  // [3,4,5,4,3]

上面的代码通过调用filter()方法返回包含3,4,5,4,3的数组。这个方法对于查询符合某些条件的所有数组非常有用。

map()方法也返回一个数组,而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。例如,可以给数组中的每一项都乘以2,然后返回这些乘积组成的数组:

var nums = [1,2,3,4,5,4,3,2,1];
var result = nums.map(function(item, index, array){
 return item * 2;
})
console.info(result);  // [2,4,6,8,10,8,6,4,2]

map()方法适合用于创建包含的项于另一个数组一一对应的数组。

最后一个是forEach()方法,它只是对数组中的每一项运行传入的函数。这个方法没有返回值,本质上于使用for循环迭代数组是一样的。看下面的例子:

var nums = [1,2,3,4,5,4,3,2,1];
nums.forEach(function(item, index, array){
 //执行需要的操作
})

js中的这些数组方法通过执行不同的操作,可以大大的方便处理数组的任务。

支持这些迭代方法的浏览器有:IE9+,Firefox2+,Safari3+,Opera9.5+和Chrome。

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
    //every()和some()最相似
    //every() item:当前遍历项,index:当前项索引,array:数组对象本身
    var everyResult = numbers.every(function (item, index, array) {
      return item > 2;
    });
    alert(everyResult);//false
    //some()
    var someResult = numbers.some(function (item, index, array) {
      return item > 2;
    });
    alert(someResult);//true
    //filter
    var filterResult = numbers.filter(function (item, index, array) {
      return item > 2;
    });
    alert(filterResult);//[3,4,5,4,3]
    //map()
    var mapResult = numbers.map(function (item, index, array) {
      return (item * 2);
    });
    alert(mapResult);//[2,4,6,8,10,8,6,4,2]
    //forEach 本质上和for循环没有区别
    var forEachResult=numbers.forEach(function(item,index,array){
      alert(item)
    });

以上就是本文的全部内容了,希望能给大家一些提示,能够更好的理解javascript迭代方法。

Javascript 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
详解Vue router路由
Nov 20 Vue.js
js实现用户注册协议倒计时的方法
Jan 21 #Javascript
浅谈javascript 归并方法
Jan 21 #Javascript
JS获取时间的方法
Jan 21 #Javascript
javascript中数组的定义及使用实例
Jan 21 #Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 #Javascript
javascript 获取浏览器版本
Jan 21 #Javascript
javascript 实现 原路返回
Jan 21 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
毕业生物理教师求职信
2013/10/17 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
面试后感谢信
2014/02/01 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
ORACLE查看当前账号的相关信息
2021/06/18 Oracle