总结javascript中的六种迭代器


Posted in Javascript onAugust 16, 2016

1.forEach迭代器

forEach方法接收一个函数作为参数,对数组中每个元素使用这个函数,只调用这个函数,数组本身没有任何变化

//forEach迭代器
function square(num){
  document.write(num + ' ' + num*num + '<br>');
}

var nums = [1,2,3,4,5,6,7,8];
nums.forEach(square);

在浏览器中输出的结果是:

总结javascript中的六种迭代器

2.every迭代器

every方法接受一个返回值为布尔类型的函数,对数组中的每个元素使用这个函数,如果对于所有的元素,该函数均返回true,则该方法返回true,否则返回false

//every迭代器
function isEven(num){
  return num % 2 == 0;
}
var nums = [2,4,6,8];
document.write(nums.every(isEven));

3.some迭代器

some方法也是接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回true,该方法就返回true

//some迭代器
function isEven(num){
  return num % 2 == 0;
}
var nums = [1,3,5,7];
document.write(nums.some(isEven));

4.reduce迭代器

reduce方法接受一个函数,返回一个值,该方法从一个累加值开始,不断对累加值和数组中的后续元素调用该函数,知道数组中最后一个元素,最后得到返回的累加值

//reduce迭代器
function add(runningTotal, currentValue){
  return runningTotal + currentValue;
}
var nums = [1,2,3,4,5,6,7,8,9,10];
var sum = nums.reduce(add);
document.write(sum);

得到的结果是:55

reduce()函数和add()函数一起,从左到右,一次对数组中的元素求和,执行过程如下:

add(1,2) -> 3
add(3,3) -> 6
add(6,4) -> 10
add(10,5) -> 15
add(15,6) -> 21
add(21,7) -> 28
add(28,8) -> 36
add(36,9) -> 45
add(45,10) -> 55

reduce方法也可以用来将数组中的元素链接成一个长的字符串,代码如下

//使用reduce连接数组元素
function concat(accumulatedString, item){
  return accumulatedString + item;
}
var words = ['the ', 'quick ', 'brown ', 'fox'];
var sentence = words.reduce(concat);
document.write(sentence);

最后输出结果如下:

总结javascript中的六种迭代器

javascript还提供了reduceRight方法,和Reduce方法不同,它是从右到左执行,如下:

//使用reduce连接数组元素
function concat(accumulatedString, item){
  return accumulatedString + item;
}
var words = ['the ', 'quick ', 'brown ', 'fox '];
var sentence = words.reduceRight(concat);
document.write(sentence);

执行结果如下:

总结javascript中的六种迭代器

5.map迭代器

map迭代器和forEach有些类似,但是map会改变数组,生成新的数组,如下代码

//使用map迭代器生成新的数组
function curve(grade){
  return grade+5;
}
var grades = [77,65,81,92,83];
var newgrades = grades.map(curve);
document.write(newgrades);

输出结果:

总结javascript中的六种迭代器

6.fiter迭代器

和every迭代器类似,传入一个返回值为布尔类型的函数,和every方法不同的是,当数组中所有元素对应该函数返回的结果均为true时,该方法并不返回true,而是返回一个新的数组,该数组包含对应函数返回结果为true的元素,代码如下

function isEven(num){
  return num % 2 == 0;
}

function isOdd(num){
  return num % 2 != 0;
}

var nums = [];
for (var i=0; i<20; i++) {
  nums[i] = i+1;
}
var evens = nums.filter(isEven);
document.write(evens);
document.write('<br>');
var odds = nums.filter(isOdd);
document.write(odds);

输出结果如下:

总结javascript中的六种迭代器

总结

以上就是关于javascript中的六种迭代器的总结,希望本文的内容对大家学习工作能有所帮助。

Javascript 相关文章推荐
可输入的下拉框
Jun 19 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
ES6对象操作实例详解
May 23 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 #Javascript
深入理解(function(){... })();
Aug 16 #Javascript
关于JSON与JSONP简单总结
Aug 16 #Javascript
json与jsonp知识小结(推荐)
Aug 16 #Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 #Javascript
JS读写CSS样式的方法汇总
Aug 16 #Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 #Javascript
You might like
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
javascript动态加载三
2012/08/22 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
python读取文本中的坐标方法
2018/10/14 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
python语言的优势是什么
2020/06/17 Python
Python bisect模块原理及常见实例
2020/06/17 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
毕业生的自我评价
2013/12/30 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
新书吧创业计划书
2014/01/31 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
高一学生评语大全
2014/04/25 职场文书
政协调研汇报材料
2014/08/15 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
导游词之襄阳古城
2019/09/27 职场文书