总结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原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
Javascript函数式编程语言
Oct 11 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
php猜单词游戏
2015/09/29 PHP
微信支付开发维权通知实例
2016/07/12 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
php中的异常和错误浅析
2017/05/03 PHP
PHP xpath()函数讲解
2019/02/11 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
法律专业应届生自荐信范文
2014/01/06 职场文书
工程技术员岗位职责
2014/03/02 职场文书
庆祝教师节标语
2014/10/09 职场文书
《学会看病》教学反思
2016/02/17 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
Ruby处理CSV数据方法详解
2022/04/18 Ruby