浅谈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的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
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
SONY ICF-SW55的电路分析
2021/03/02 无线电
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python中的常量和变量代码详解
2018/07/25 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
python 回溯法模板详解
2020/02/26 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
python如何求圆的面积
2020/07/01 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
物流管理专业应届生求职信
2013/11/21 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
暂住证明怎么写
2015/06/19 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
MySQL数据库简介与基本操作
2022/05/30 MySQL
create-react-app开发常用配置教程
2022/06/25 Javascript
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技