JavaScript 循环通过数组

在编写 JavaScript 代码时，我们经常需要循环通过数组来遍历其中的元素。本文将介绍如何使用 JavaScript 中的循环结构，以及如何使用它们来遍历一个数组。

for 循环

最常用的循环结构是 for 循环。它使用 for 关键字以及圆括号包裹的三个参数：循环变量的初始化语句、循环条件语句、以及每次循环迭代的更新语句。这些三个语句用分号分隔。

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

在上面的例子中，我们使用 for 循环来循环遍历一个包含了 5 个元素的数组。我们使用循环变量 i 来表示数组中的元素下标，并通过 array[i] 来访问该下标对应的元素。我们能够在循环迭代中使用任何 JavaScript 表达式，这使得 for 循环能够非常灵活地应用。

for...of 循环

ES6 引入的一个新的循环结构是 for...of 循环。它使用 for 关键字后跟一个圆括号，在圆括号内部声明一个循环变量，之后使用 of 以及要循环遍历的数组来遍历该数组。

const array = [1, 2, 3, 4, 5];

for (const element of array) {
  console.log(element);
}

在上面的例子中，我们使用 for...of 循环来循环遍历一个包含了 5 个元素的数组。我们使用 element 作为循环变量来依次获取数组中的每一个元素。 for...of 循环简洁明了，更易于阅读和维护。

forEach 循环

如果你不需要使用循环变量的下标，那么你可以使用 forEach 循环来遍历数组。forEach 循环是一个针对数组的高阶函数，它接受一个回调函数作为参数。在该回调函数中，我们可以访问数组的当前元素以及对应的下标。

const array = [1, 2, 3, 4, 5];

array.forEach((element, index) => {
  console.log(`[${index}] = ${element}`);
});

在上面的例子中，我们使用 forEach 循环来循环遍历一个包含了 5 个元素的数组。我们使用回调函数来访问数组中的每个元素。这个回调函数接受两个参数：数组中的当前元素和对应的下标。我们将它们打印到控制台上。

map 循环

如果你需要对数组中的每个元素进行变换，那么你可以使用 map 循环来遍历数组。 map 循环也是一个针对数组的高阶函数，它接受一个回调函数作为参数，并返回一个新的数组，其中包含了应用回调函数之后的每个元素。

const array = [1, 2, 3, 4, 5];

const squareArray = array.map((element) => {
  return element ** 2;
});

console.log(squareArray);

在上面的例子中，我们使用 map 循环来遍历一个包含了 5 个元素的数组。我们使用回调函数来将数组中每个元素取平方，并将结果保存在一个新的数组中。我们通过 console.log 将这个新的数组打印到了控制台上。

结论

本文介绍了在 JavaScript 中通过循环来遍历数组的四种不同的方法：for 循环、 for...of 循环、forEach 循环 和 map 循环。这些方法都可以应用到基于数组的数据类型，同时也能够通过应用回调函数来支持更高级的操作。