总结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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
jQuery中html()方法用法实例
2014/12/25 Javascript
详解参数传递四种形式
2015/07/21 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
js图片上传的封装代码
2017/08/01 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
python实现倒计时的示例
2014/02/14 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
如何获取Python简单for循环索引
2019/11/21 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Python爬虫开发与项目实战
2020/12/16 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
平面设计的岗位职责
2013/11/08 职场文书
班主任工作经验材料
2014/02/02 职场文书
电工工作职责范本
2014/02/22 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
应届生求职信
2014/05/31 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
导游词之上饶龟峰
2019/10/25 职场文书