浅谈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 相关文章推荐
url 特殊字符 传递参数解决方法
Jan 01 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 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来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
pycharm快捷键汇总
2020/02/14 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
python中的测试框架
2020/11/13 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
具结保证书
2015/01/17 职场文书
秋季运动会加油词
2015/07/18 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server