浅谈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 在网页中的运用(asp.net)
Nov 23 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python程序运行原理图文解析
2018/02/10 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
软件测试面试题
2014/01/05 面试题
俞敏洪北大演讲稿
2014/05/22 职场文书
开展读书活动总结
2014/06/30 职场文书
小学优秀学生评语
2014/12/29 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
离婚起诉书范本
2015/05/18 职场文书
妈妈别哭观后感
2015/06/08 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android