浅谈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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
javascript用函数实现对象的方法
May 14 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
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
晶体管来复再生式二管收音机
2021/03/02 无线电
我的群发邮件程序
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
python利用有道翻译实现"语言翻译器"的功能实例
2017/11/14 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
用python实现的线程池实例代码
2018/01/06 Python
python 列表降维的实例讲解
2018/06/28 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
安全宣传标语
2014/06/10 职场文书
满月酒邀请函
2015/01/30 职场文书