浅谈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对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 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日历程序
2006/12/06 PHP
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
Redis构建分布式锁
2017/03/28 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
Python实现简单截取中文字符串的方法
2015/06/15 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
python处理xml文件的方法小结
2017/05/02 Python
python梯度下降法的简单示例
2018/08/31 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python读取xml文件方法解析
2020/08/04 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
综合测评个人总结
2015/03/03 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
素质教育培训心得体会
2016/01/19 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
浅谈Vue的computed计算属性
2022/03/21 Vue.js