总结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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
js实现上传图片预览方法
Oct 25 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
javascript实现简易聊天室
Jul 12 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
python清理子进程机制剖析
2017/11/23 Python
Python3匿名函数用法示例
2018/07/25 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
python读取各种文件数据方法解析
2018/12/29 Python
django 类视图的使用方法详解
2019/07/24 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
python 录制系统声音的示例
2020/12/21 Python
python中uuid模块实例浅析
2020/12/29 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
毕业生求职的求职信
2013/12/05 职场文书
化学实验员岗位职责
2013/12/28 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
2014年工会工作总结
2014/11/12 职场文书
优秀党员事迹材料
2014/12/18 职场文书
英文感谢信格式
2015/01/21 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
alibaba seata服务端具体实现
2022/02/24 Java/Android
在python中读取和写入CSV文件详情
2022/06/28 Python