总结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 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
js a标签点击事件
Mar 30 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
基于JavaScript实现简单的轮播图
Mar 03 Javascript
JS数组的常用方法整理
Mar 31 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
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
PHP 实现缩略图
2021/03/09 PHP
jQuery把表单元素变为json对象
2013/11/06 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
js实现登录验证码
2016/12/22 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
python实现telnet客户端的方法
2015/04/15 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
医学生职业规划范文
2014/01/05 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
上级检查欢迎词
2014/01/18 职场文书
工地安全质量标语
2014/06/07 职场文书
李强优秀员工观后感
2015/06/16 职场文书
2016党员入党决心书
2015/09/22 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书