浅谈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精华代码集
Jan 24 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
AngularJs表单验证实例详解
May 30 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
json数据格式常见操作示例
Jun 13 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
javascript实现滚轮轮播图片
Dec 13 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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
javascript如何创建对象
2016/08/29 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
让代码变得更易维护的7个Python库
2018/10/09 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
介绍一下如何优化MySql
2016/12/20 面试题
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
住房租房协议书
2014/08/20 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
司机岗位职责
2015/02/04 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
篮球拉拉队口号
2015/12/25 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Python实现天气查询软件
2021/06/07 Python
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL