总结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中绑定事件的命名空间详解
Apr 05 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 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
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python中模块的__all__属性详解
2017/10/26 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
python实现126邮箱发送邮件
2020/05/20 Python
keras导入weights方式
2020/06/12 Python
Django封装交互接口代码
2020/07/12 Python
使用Python pip怎么升级pip
2020/08/11 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
广州某公司软件工程师面试题
2014/12/22 面试题
化学实验员岗位职责
2013/12/28 职场文书
党校培训学习心得体会
2016/01/06 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书