浅谈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 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
javascript之bind使用介绍
Oct 09 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
微信小程序文字显示换行问题
Jul 28 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
php email邮箱正则
2008/10/08 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
json数据与字符串的相互转化示例
2013/09/18 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
python中实现将多个print输出合成一个数组
2018/04/19 Python
深入了解python中元类的相关知识
2019/08/29 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
为什么要使用servlet
2016/01/17 面试题
自主招生自荐信范文
2013/12/04 职场文书
教师节促销方案
2014/03/22 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
担保书范文
2015/01/20 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
python字符串的一些常见实用操作
2022/04/06 Python