浅谈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 获取链接(url)参数的方法
Feb 15 Javascript
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
jquery选择器使用详解
Apr 08 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
thinkphp分页实现效果
2016/10/13 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
php探针不显示内存解决方法
2019/09/17 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python中装饰器高级用法详解
2017/12/25 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
自我鉴定思想方面
2013/10/07 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
公司员工安全协议书
2014/11/21 职场文书
运输公司工作总结
2015/08/11 职场文书
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技