总结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 源码分析笔记(4) Ready函数
Jun 02 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
原生JS实现汇率转换功能代码实例
May 13 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 和 MySQL 基础教程(一)
2006/10/09 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
php微信开发之图片回复功能
2018/06/14 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jQuery功能函数详解
2015/02/01 Javascript
js实现进度条的方法
2015/02/13 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
python生成词云的实现方法(推荐)
2017/06/13 Python
Python使用进程Process模块管理资源
2020/03/05 Python
序列化Python对象的方法
2020/08/01 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸