浅谈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 学习笔记 选择器之二
Jul 23 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
javascript常用代码段搜集
Dec 04 Javascript
javascript实现日期按月份加减
May 15 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 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中include()与require()的区别说明
2010/03/10 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
理解 JavaScript Scoping & Hoisting(二)
2015/11/18 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
Python sys.argv用法实例
2015/05/28 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Python生成词云的实现代码
2020/01/14 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
神路信息Java面试题目
2013/03/31 面试题
21岁生日感言
2014/02/27 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
保护黄河倡议书
2014/05/16 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
合伙购房协议样本
2014/10/06 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
德生2P3收音机开箱评测
2022/04/30 无线电