浅谈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中prepend()方法用法实例
Dec 25 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
原生js编写焦点图效果
Dec 08 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
微信小程序日历插件代码实例
Dec 04 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
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python selenium如何设置等待时间
2016/09/15 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
节水口号标语
2014/06/19 职场文书
企业战略合作意向书
2015/05/08 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
Python3 类型标注支持操作
2021/06/02 Python
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
Python实现排序方法常见的四种
2021/07/15 Python
如何利用golang运用mysql数据库
2022/03/13 Golang