总结javascript中的六种迭代器

 更新时间:2016年08月16日 10:29:27   投稿:daisy  
本文总结了javascript中的六种迭代器的使用实例,分别是forEach迭代器、every迭代器、some迭代器、reduce迭代器、map迭代器和fiter迭代器,有需要的小伙伴们可以参考借鉴。

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);

在浏览器中输出的结果是:

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还提供了reduceRight方法,和Reduce方法不同,它是从右到左执行,如下:

//使用reduce连接数组元素
function concat(accumulatedString, item){
  return accumulatedString + item;
}
var words = ['the ', 'quick ', 'brown ', 'fox '];
var sentence = words.reduceRight(concat);
document.write(sentence);

执行结果如下:


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);

输出结果:

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组合继承方法代码实例解析

    这篇文章主要介绍了Javascript组合继承方法代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • package.json与package-lock.json的区别及详细解释

    package.json与package-lock.json的区别及详细解释

    不知道大家平时在开发中有没有注意到,你的项目中有两个文件:package.json,package-lock.json,应该很多人平时都不会去关注这两个文件有啥关系吧,这篇文章主要给大家介绍了关于package.json与package-lock.json的区别及详细解释,需要的朋友可以参考下
    2022-08-08
  • 如何在wxml中直接写js代码(wxs)

    如何在wxml中直接写js代码(wxs)

    这篇文章主要介绍了如何在wxml中直接写js代码(wxs),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • 深入理解javascript中的 “this”

    深入理解javascript中的 “this”

    本文主要介绍了javascript中“this”的相关知识。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 详解js删除数组中的指定元素

    详解js删除数组中的指定元素

    在本篇文章中我们给大家分享了js删除数组中的指定元素的详实示例方法,有需要的朋友们学习下
    2018-10-10
  • 微信小程序实现字母索引菜单

    微信小程序实现字母索引菜单

    这篇文章主要为大家详细介绍了微信小程序实现字母索引菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • input点击后placeholder中的提示消息消失

    input点击后placeholder中的提示消息消失

    placeholder属性是HTML5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示
    2016-01-01
  • 微信小程序实现简单秒表设计

    微信小程序实现简单秒表设计

    这篇文章主要为大家详细介绍了微信小程序实现简单秒表设计,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • javascript实现的一个带下拉框功能的文本框

    javascript实现的一个带下拉框功能的文本框

    这篇文章主要介绍了javascript实现的一个带下拉框功能的文本框,需要的朋友可以参考下
    2014-05-05
  • 一行JavaScript代码如何实现瀑布流布局

    一行JavaScript代码如何实现瀑布流布局

    这篇文章主要给大家介绍了如何通过一行JavaScript代码实现瀑布流布局的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论