如何在JavaScript中循环/遍历一个数组

吴欣
300 阅读3分钟

循环是每种编程语言的关键组成部分。它们被用来在一个循环中反复运行相同的代码或逻辑。通常情况下，循环有一个索引值，每次循环重复的时候都是不同的。在JavaScript中，有不同种类的循环，可以帮助我们在数组上进行迭代。数组是一个用来存储不同元素的集合；JavaScript中数组的一个例子是。

const names = ['John', 'Chris', 'Harry'];

要从这个数组中获得一个元素，我们只需提供索引和数组的名称。

console.log(names[2]);


这将返回 "Harry"，因为索引是从0开始的。

我们已经看到，我们可以通过指定一个索引号从一个数组中获得一个元素。但是如果上述数组中有100个名字，那就太麻烦了。解决办法是使用循环；循环可以很容易地处理有许多条目的数组。这篇文章的重点是我们如何使用JavaScript循环来迭代数组，成为一个高效的程序员。

注意：本文中的例子是用浏览器控制台来演示的。

如何使用JavaScript for 循环遍历一个数组

for循环是一个循环，只要某个条件为真，就会重复一个动作。当该条件变成假时，循环就会中断。JavaScript中for循环的语法与Java或C语言相似；最简单的for循环语法是。

for(initialize variable; some condition;  variable increments/decrements){
    //some code to be executed
}

在一个数组上进行for循环迭代的例子是。

const names = ['John', 'Chris', 'Harry'];

for(let index = 0; index < names.length; index++){

    console.log(names[2]);
}


我们首先声明了一个名为names的数组，然后是一个for循环，并在for循环中初始化了一个名为index的变量；这将作为该数组的索引。之后，我们设置了一个条件，即循环应该运行到比数组长度少一的位置，即从0到2（共3次）。最后一个括号告诉循环，每一个循环都将索引增加1。每一个循环，我们使用初始化的变量，即索引，逐一记录数组元素。

简而言之，循环从第0个索引开始，然后检查数组的长度。如果条件为真，则循环运行括号内的代码块，也就是控制台记录。在这之后，它增加 "index"，然后再次检查条件。同样的循环重复进行，直到指定的条件不再为真。

如何使用JavaScript while 循环遍历一个数组

从语法上讲，JavaScript的while循环也类似于C或Java的while循环。在JavaScript中使用while循环迭代数组的例子是。

const names = ['John', 'Chris', 'Harry'];

index=0;

while(index<names.length){

console.log(names[index]);
index++;
}

如何使用JavaScript for/of循环遍历一个数组

for/of循环也被用来循环数组中的项目/元素。

const names = ['John', 'Chris', 'Harry'];

for (name of names) {

    console.log(name);
}
}

如何使用JavaScript forEach循环来迭代一个数组

forEach()方法为数组中的每个元素调用或执行一个指定的回调函数。它需要三个参数：当前项目/元素、索引和数组本身。

const names = ['John', 'Chris', 'Harry'];

names.forEach(element => {
   console.log(element);
});

在上面的例子中，我们使用了一个箭头函数，它在.forEach()循环中把数组的当前元素作为参数，以控制台.log每个元素。

如何在JavaScript中使用map方法遍历一个数组

Map()方法通过创建一个新的数组来遍历一个数组。对于原数组中的每一个元素，它都会执行一些函数，例如下面给出的例子中以num为参数的箭头函数。它并不改变原始数组。现在假设我们有一个从1到5的数组。我们希望每个数字都能乘以2，我们可以通过以下方式实现。

let table1 = [1,2,3,4,5];
let table2 = table1.map(num => num * 2);

console.log(table2);

如何使用JavaScript中的every方法遍历一个数组

every()方法测试数组中的每个元素是否通过了由所提供的函数实现的条件；它为每个元素执行一次函数。根据每个元素是否通过测试，它返回真或假。

const isLessThanTen = (currentValue) => currentValue < 10;

const arr = [1, 3, 4, 3, 5, 7];

console.log(arr.every(isLessThanTen));

现在，如果我们改变上述例子中的数组。

const arr = [1, 3, 16, 3, 5, 7];

总结

在JavaScript中，数组是一种数据类型，用于存储类似的数据；通过使用JavaScript提供的不同的循环和方法，可以很容易地访问和操作这些数据。在这篇文章中，我们介绍了在JavaScript中对数组进行迭代的基本知识。我们还讨论了通过for、while、for/of、forEach()循环、map()和every()方法来迭代数组。

这些并不是唯一可以用来迭代数组的方法。还有几十种方法。我们讨论的这些方法是开发人员在数组上迭代时广泛使用的方法。

avatar
文章
阅读
粉丝