浅谈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标签在页面中的位置探讨
Apr 11 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
详解JS模块导入导出
2017/12/20 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
跟老齐学Python之做一个小游戏
2014/09/28 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Django和Flask框架优缺点对比
2019/10/24 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
智乐游戏测试笔试题
2014/05/21 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android