总结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中的ajax分页实现代码
Sep 20 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
Vue详细的入门笔记
May 10 Vue.js
你知道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来实现网络服务
2009/09/15 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
javascript 常用方法总结
2009/06/03 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
JS交换变量的方法
2015/01/21 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python局域网ip扫描示例分享
2014/04/03 Python
python判断完全平方数的方法
2018/11/13 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
Python pandas用法最全整理
2019/08/04 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
入党政审材料范文
2014/12/24 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
七年级作文之游记
2019/12/11 职场文书