总结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 日期常用的方法
Nov 11 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
js单例模式的两种方案
Oct 22 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
js的Object.assign用法示例分析
Mar 05 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php调整服务器时间的方法
2015/04/03 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
javascript中的this详解
2014/12/08 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
js获取url传值的方法
2015/12/18 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
农村婚礼证婚词
2014/01/10 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
公务员个人总结
2015/02/12 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB