JS迭代器函数大全

news/2024/7/19 12:49:35 标签: js, 前端, es6, 面试, 数组

有时,我们需要迭代数组中的元素。可以使用循环语句来处理,例如for语句。

JavaScript内置了很多数组可用的迭代方法。

我们先写一点基础代码:

function isEven(x) {
    // 如果x是2的倍数,就返回true
    console.log(x);
    return x % 2 === 0; 
}
let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

我们写了一个判断奇偶的函数,isEven

如果是x是2的倍数,就返回true,否则就返回false

ok,下面我们开始介绍各种用于迭代数组的函数。

用every方法迭代

我们要尝试的第一个方法是everyevery方法会迭代数组中的每个元素,知道返回false

numbers.every(isEven);

在这个例子里,数组numbers的第一个元素是1,它不是2的倍数,因为isEven函数返回false,然后every执行结束。

用some方法迭代

下一步,我们来看some方法,它和every的行为相反,会迭代数组中的每个元素,直到函数返回true

numbers.some(isEven);

在我们的例子里,numbers数组中第一个偶数是2(第二个元素)。第一个被迭代的元素是1,isEven会返回false。第二个被迭代的元素是2,isEven返回true——迭代结束。

用forEach方法迭代

如果要迭代整个数组,可以用forEach方法。它和使用for循环的结果相同。

numbers.forEach(x => console.log(x % 2 === 0));

用map和filter方法迭代

JavaScript还有两个会返回新数组的迭代方法。第一个是map

const myMap = numbers.map(isEven);

数组myMap里的值是:[false,true,false,true,false,true,false,true,false,true,false,true,false,true,false]
它保存了传入map方法的isEven函数的运行结果。这样就很容易知道一个元素是否是偶数。比如,myMap[0]false,因为1不是偶数;而myMap[1]是true,所以2是偶数。

还有一个filter方法,它返回的新数组由使函数返回true的元素组成。

const evenNumbers = numbers.filter(isEven);

在我们的例子里,evenNumbers数组红的元素都是偶数:[2,4,6,8,10,12,14]

使用reduce方法

最后是reduce方法。reduce方法接收一个有如下四个参数的函数:previousValuecurrentValueindexarray。因为indexarray是可选的参数,所以如果用不到它们的话,可以不传。这个函数会返回一个将被叠加到累加器的值,reduce方法停止执行后会返回这个累加器。如果要对一个数组中的所有元素求和,这就很有用。下面是一个例子。

numbers.reduce((previous,current) => previous + current);

输出将是120。

我们上面讲述了很多关于数组可用的迭代函数,完成了一开始写的需求,因篇幅限制,我无法详细介绍各个函数,如果想了解详细的内容,可以查一下MDN的文档,

有任何问题都可以加我联系方式沟通交流。我最近在找实习,有渠道的也可以联系我。

联系方式
QQ:505417246
微信:18331092918
微信公众号:Code程序人生


http://www.niftyadmin.cn/n/1576432.html

相关文章

一个CPO的心得分享:搭建风控系统道路上踩过的坑04-风险分析

风控系统和大部分的产品项目一样,最终需要对领导层汇报这个项目为公司带来了什么价值,这是评估项目成功与否的要素; 另外是哪里做的不够好,如果改善了能带来更多的价值,给出了预期才有后续资源的补充,整个项…

ES5和ES6新增的数组方法

let numbers [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]使用for…of循环迭代 你已经学过用for循环和forEach方法迭代数组。ES2015还引入了迭代数组值的for...of循环,下面来看看它的用法。 for(const n of numbers){console.log(n % 2 0 ? even : odd);使用iterato…

跟KingDZ学HTML5之四 继续探究Canvas之路径

哈哈,开始吧,这节课第一个内容是 路径。路径,顾名思义,就是俺拿着画笔,划线呗。 画图的几个步骤。 第一步:找个起点开始画图。----beginPath; 第二步 : 划线,画出自己想要的图像 。 第三步&…

JS使用栈实现十进制转二进制

最近在准备面试,复习到了数据结构与算法的知识,到了栈这块内容,栈的特点大家都知道,先进后出。 数据结构的特点决定了它的应用。 大家在准备面试的时候,多多少少都会复习到数据结构的知识,大部分人都觉得…

大英四-考试

2019独角兽企业重金招聘Python工程师标准>>> ------------------------------------------------------------------------------------------------- status put off customers counts list treat statue range…

JS Symbol类型大揭秘,为什么面试都喜欢问?

在JS中,有一个数据类型大家可能用的不太多,但是面试出现的频率很高,那就是ES6引入的Symbol类型。 一、Symbol概述 ES5的对象属性名都是字符串,这很容易造成属性名的冲突。 比如,你使用了一个他人提供的对象&#xff…

JS使用普通队列实现击鼓传花游戏

最近复习到了数据结构中的普通队列部分,来实现一个击鼓传花游戏的应用。 循环队列的一个例子就是击鼓传花(hot potato),在这个游戏中,孩子们围成一个圆圈,把花尽快地传递给旁边的人。某一时刻传话停止,这个时候花在谁手…

fastjson 过滤不需要序列化的属性

JSON JSON英文全称为JavaScriptObject Natation,采用key:value键值对的方式存贮数据,与xml格式相比,JSON是一种轻量级的数据交换格式;不要被JavaScript这个单词迷惑,实际上JSON只是一种数据格式,与具体语言…