浅谈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 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
如何使用vue3打造一个物料库
May 08 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
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
JS中type="button"和type="submit"的区别
2017/07/04 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
简单讲解Python中的闭包
2015/08/11 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
python 将md5转为16字节的方法
2018/05/29 Python
Python 3.8 新功能全解
2019/07/25 Python
Django操作session 的方法
2020/03/09 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
师范大学毕业自我鉴定
2013/11/21 职场文书
心得体会开头
2014/01/01 职场文书
委托书模板
2014/04/04 职场文书
企业宗旨标语
2014/06/10 职场文书
鲁迅故居导游词
2015/02/05 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL