浅谈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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
JavaScript 数组的 uniq 方法
Jan 23 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
JS继承最简单的理解方式
Mar 31 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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
javascript自执行函数
2017/02/10 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python查询mysql中文乱码问题
2014/11/09 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
Sanic框架流式传输操作示例
2018/07/18 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python命令 -u参数用法解析
2019/10/24 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
女方回门宴答谢词
2014/01/14 职场文书
校本教研活动总结
2014/07/01 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
2014年大学生工作总结
2014/11/20 职场文书
工程款申请报告
2015/05/15 职场文书
电影建党伟业观后感
2015/06/01 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书