总结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 相关文章推荐
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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 项目的方法
2007/01/02 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
jquery常用操作小结
2014/07/21 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python引用模块和查找模块路径
2016/03/17 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python实现大量图片重命名
2020/03/23 Python
django 简单实现登录验证给你
2019/11/06 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
美国时尚在线:Showpo
2017/09/08 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
《长相思》听课反思
2014/04/10 职场文书
社保委托书怎么写
2014/08/02 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
python之django路由和视图案例教程
2021/07/26 Python