总结javascript中的六种迭代器
2016-08-16 00:00
701 查看
1.forEach迭代器
forEach方法接收一个函数作为参数,对数组中每个元素使用这个函数,只调用这个函数,数组本身没有任何变化
在浏览器中输出的结果是:
![](http://www.jb51.net/article/_CPIC_/201608/973b9f3dd0b61c9bc9205f991868f992.png)
2.every迭代器
every方法接受一个返回值为布尔类型的函数,对数组中的每个元素使用这个函数,如果对于所有的元素,该函数均返回true,则该方法返回true,否则返回false
3.some迭代器
some方法也是接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回true,该方法就返回true
4.reduce迭代器
reduce方法接受一个函数,返回一个值,该方法从一个累加值开始,不断对累加值和数组中的后续元素调用该函数,知道数组中最后一个元素,最后得到返回的累加值
得到的结果是:55
最后输出结果如下:
![](http://www.jb51.net/article/_CPIC_/201608/15f4c2ed16fa422e979b3838c9140a27.png)
javascript还提供了
执行结果如下:
![](http://www.jb51.net/article/_CPIC_/201608/5de125467ed784ec528fe65ec3e71327.png)
5.map迭代器
map迭代器和forEach有些类似,但是map会改变数组,生成新的数组,如下代码
输出结果:
![](http://www.jb51.net/article/_CPIC_/201608/2efa345afc3a7857a3af22130c3a7ac0.png)
6.fiter迭代器
和every迭代器类似,传入一个返回值为布尔类型的函数,和
输出结果如下:
![](http://www.jb51.net/article/_CPIC_/201608/e397e698f42f275f432110ecc11b8c7e.png)
总结
以上就是关于javascript中的六种迭代器的总结,希望本文的内容对大家学习工作能有所帮助。
JavaScript数组迭代器实例分析
深入理解JavaScript系列(35):设计模式之迭代器模式详解
JavaScript中的迭代器和生成器详解
javascript天然的迭代器
js 数组实现一个类似ruby的迭代器
python的迭代器与生成器实例详解
Ruby中的迭代器详解
forEach方法接收一个函数作为参数,对数组中每个元素使用这个函数,只调用这个函数,数组本身没有任何变化
//forEach迭代器 function square(num){ document.write(num + ' ' + num*num + '<br>'); } var nums = [1,2,3,4,5,6,7,8]; nums.forEach(square);
在浏览器中输出的结果是:
![](http://www.jb51.net/article/_CPIC_/201608/973b9f3dd0b61c9bc9205f991868f992.png)
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);
最后输出结果如下:
![](http://www.jb51.net/article/_CPIC_/201608/15f4c2ed16fa422e979b3838c9140a27.png)
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);
执行结果如下:
![](http://www.jb51.net/article/_CPIC_/201608/5de125467ed784ec528fe65ec3e71327.png)
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);
输出结果:
![](http://www.jb51.net/article/_CPIC_/201608/2efa345afc3a7857a3af22130c3a7ac0.png)
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);
输出结果如下:
![](http://www.jb51.net/article/_CPIC_/201608/e397e698f42f275f432110ecc11b8c7e.png)
总结
以上就是关于javascript中的六种迭代器的总结,希望本文的内容对大家学习工作能有所帮助。
您可能感兴趣的文章:
学习JavaScript设计模式之迭代器模式JavaScript数组迭代器实例分析
深入理解JavaScript系列(35):设计模式之迭代器模式详解
JavaScript中的迭代器和生成器详解
javascript天然的迭代器
js 数组实现一个类似ruby的迭代器
python的迭代器与生成器实例详解
Ruby中的迭代器详解
相关文章推荐
- 总结javascript中的六种迭代器
- JavaScript实现数组去重方法总结(六种方法)
- JavaScript 六种跳转方式总结
- javascript的六种迭代器
- JavaScript学习总结 初识JS
- Javascript 作用域链 活动对象 执行环境 与 this 的纠结 总结~
- javascript兼容性问题总结
- JavaScript和jQuery的类型判断总结
- JavaScript程序执行顺序问题总结
- js总结示意图、javascript总结、javascript 学习线路图
- javascript一些面试经常使用的问题总结
- JavaScript 性能优化的小知识总结
- JavaScript面向对象之体会[总结]
- JavaScript的DOM(文档对象)基础语法总结1
- 排序算法总结二(JavaScript)
- 2012.11.21 学习javascript总结与思考
- javascript 基础学习整理 二 之 html对象总结,参考W3C
- 常用的JavaScript总结
- JS-Javascript 迭代器设计模式 Iterator pattern
- Javascript中字符串相关常用的使用方法总结