浅谈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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
vue时间格式化实例代码
Jun 13 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
vue2路由基本用法实例分析
Mar 06 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
How do I change MySQL timezone?
2008/03/26 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
白鹤梁导游词
2015/02/06 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
Python中第三方库Faker的使用详解
2022/04/02 Python
Java获取字符串编码格式实现思路
2022/09/23 Java/Android