总结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 相关文章推荐
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
AngularJS中的promise用法分析
May 19 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
微信小程序实现图片上传功能
May 28 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
你知道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高级编程-函数-郑阿奇
2011/07/04 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
js 函数的副作用分析
2011/08/23 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
婚礼主持结束词
2014/03/13 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
2015年妇女工作总结
2015/05/14 职场文书
2016继续教育研修日志
2015/11/13 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS