JavaScript中用于迭代的数组方法

作者 : IT 大叔 本文共1980个字,预计阅读时间需要5分钟 发布时间: 2020-10-13

如果您以前使用过JavaScript中的数组,那么您将经常需要遍历或遍历数组中的数据。可以通过一个for循环或一个for...of循环相对简单地完成此操作,但是在相对简单的操作之外,这可能会变得很混乱。必须跟踪计数器变量并确保增量正确无误,这会使您的代码快速陷入困境,并使事情不必要地变得复杂。幸运的是,JavaScript有很多内置方法,它们可以自动循环访问Array中的每个元素,并且其中许多是针对特定的常用操作定制的。本周,我想为一些最常用的内建Array方法进行迭代创建快速参考指南。

## forEach##

forEach()方法是最通用的内置方法。它以回调函数作为参数,并在数组中的每个元素上执行它。此方法有一些可选参数,但现在我们将使其保持简单。

对于此方法以及我们将要讨论的所有方法,箭头函数允许我们直接在参数中定义回调。回调应将数组元素作为参数。如果这听起来令人困惑,请看下面的示例。

const array1 = [1, 6, 8, 10];

array1.forEach(number => console.log(number));

map

map()当您想以某种方式修改数组中的所有项目时,该方法很有用。就像forEach()它将回调作为参数一样。它将返回一个新数组,其中包含对该数组中每个项目执行该函数的结果。看下面的例子。

const array1 = [1, 3, 5, 7];

const doubleArray = array1.map( num => num * 2);

console.log(doubleArray);  // [2, 6, 10, 14]

includes

includes()当您要查找数组中的条目之间是否存在特定值时,该方法很有用。它以查询值作为参数,并根据是否找到该值返回true或返回false

const array1 = [1, 3, 5, 7];

array1.includes(3);  // true
array1.includes(2);  // false

indexOf

太好了,因此我们可以找出数组中是否存在某个值,但是如果由于某种原因需要找出该值在哪里呢?其中,这是indexOf()进来一样includes(),它需要在一个特定的值作为参数,但将返回它找到值的第一个指数。-1如果不存在该值,它将返回。您还可以选择提供一个索引,从该索引开始搜索。看下面的例子。

const array1 = [1, 8, 7, 4, 8, 10]

array1.indexOf(8);  // 1
array1.indexOf(8, 2);  // 4

find

find()方法完全按照名称的含义进行操作。它在满足传递的测试功能的数组中找到第一个值并返回它。例如,假设我们要在数组中找到小于5的第一个元素。此find()方法是理想的选择。请记住,find()这只会返回满足测试条件的数组中的第一个值。稍后我们将讨论如何获取多个值。

const array1 = [1, 3, 5, 7];

const result = array1.find(num => num < 5);

console.log(result);  // 1

filter

filter()方法基本上是find的“完整”版本。我的意思是,它的filter()工作原理相同find,只是它将返回一个新的Array,其中包含与传入的测试函数匹配的所有元素的值。

const array1 = [1, 3, 5, 7];

const result = array1.filter(num => num < 5);

console.log(result);  // [1, 3]

sort

sort()方法比我们之前讨论的方法要复杂一些。默认用法很简单-对数组中的元素进行适当排序,并以默认的升序返回排序后的数组。(可选)您可以提供定义特定排序顺序的比较功能。这有点复杂,可能会有自己的博客文章。如果您想了解有关自定义比较功能的更多信息,请查阅文档

const days = ["Mon", "Tues", "Weds", "Thurs"];

days.sort();  // ["Mon", "Thurs", "Tues", "Weds"]

reduce

reduce()我认为该方法是这些内置方法中最难掌握的方法。它接受一个reducer函数,并在每个元素上执行它,返回一个值。这种方法何时合适的一个很好的例子是,如果您想将数组中的所有数字加在一起。

reducer方法将累加器和当前值作为参数,并可选地采用起始索引(默认为0)并reduce()调用数组。如果您想更深入地了解,请参阅docs。让我们在下面看一个简单的例子。

const array1 = [1, 5, 8, 10]
const reducer = (accum, current) => accum + current;

array1.reduce(reducer);  // 24

结论

这些是遍历数组的最常用方法。我希望您发现此备忘单/指南很有用。

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » JavaScript中用于迭代的数组方法

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论