javaScript数组迭代方法详解


Posted in Javascript onApril 14, 2016

本文为大家介绍了javaScript数组迭代方法,供大家参考,具体内容如下

每个方法都接收两个参数:要在每一项上运行的函数  和  (可选的)运行该函数的作用域对象。

传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置,数组对象本身。

forEach()  对数组中的每一项运行 给定函数。该方法没有返回值。
every()  对数组中的每一项运行 给定函数,如果数组的每一项都返回true,则返回true。
some()  对数组中的每一项运行 给定函数,如果数组的任意一项返回true,则返回true。
fliter()  如果数组的每一项都返回true,则返回true。返回该函数会返回true的项组成的数组。
map()  如果数组的每一项都返回true,则返回true。返回每次函数调用的结果组成的数组。

请看以下例子:

var numbers = [1,2,3,4,5,4,3,2,1];
//every()
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()
numbers.forEach(function(item, index, array){
 alert(item);
}); //多个弹窗分别显示数组中的元素

另一个javaScript数组迭代方法,如下

var arr = [3,4,5,6,7,"a"];

var isNum = function(elem,index,AAA){
return !isNaN(elem);
}

var toUpperCase = function(elem){
return String.prototype.toUpperCase.apply(elem);
}

var print = function(elem,index){
console.log(index+"."+elem);
}

/*对数组中的每一项执行测试函数,直到获得对指定的函数返回 false 的项。 使用此方法 可确定数组中的所有项是否满足某一条件,类似于&&的含义*/
var res = arr.every(isNum);
console.log(res);//false;

/*对数组中的每一项执行测试函数,直到获得返回 true 的项。 使用此方法确定数组中的所有项是否满足条件.类似于||的含义*/
res = arr.some(isNum);
console.log(res);//true

/*对数组中的每一项执行测试函数,并构造一个新数组,返回 true的项被添加进新数组。 如果某项返回 false,则新数组中将不包含此项*/
res = arr.filter(isNum);
console.log(res);//[3, 4, 5, 6, 7]

/*对数组中的每一项执行函数并构造一个新数组,并将原始数组中的每一项的函数结添加进新数组。*/
res = arr.map(toUpperCase);
console.log(res);//["3", "4", "5", "6", "7", "A"]

/*对数组中的每一项执行函数,不返回值*/
res = arr.forEach(print);
console.log(res);

 

 

//自己扩展

/*Array.prototype.every = function(fun,obj) {
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
for (var i = 0; i < len; i++) {
if (!fun.call(obj,this[i], i,this))
return false;
}
return true;
};*/

以上就是本文的全部内容,希望对大家学习javaScript数组迭代方法有所帮助。

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 #Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 #Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 #Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 #Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 #Javascript
原生js编写autoComplete插件
Apr 13 #Javascript
JS中的eval 为什么加括号
Apr 13 #Javascript
You might like
我的论坛源代码(十)
2006/10/09 PHP
Views rows style模板重写代码
2011/05/16 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python基础教程之常用运算符
2014/08/29 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
python 将Excel转Word的示例
2021/03/02 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
党员一句话承诺大全
2014/03/28 职场文书
教室标语大全
2014/06/21 职场文书
岗位工作说明书
2014/07/29 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python