迹忆客 专注技术分享

本教程说明了如何遍历 JavaScript 中的数组。我们可以使用 Vanilla JavaScript 中的传统方法（例如 for 循环和 while 循环）或使用 ES5，ES6 引入的较新方法（例如 forEach、for ... of、for ... in）来执行此操作以及许多其他方法，具体取决于我们的用例和代码的速度/效率。

在 JavaScript 中使用 for 循环来循环遍历数组

传统的 for 循环类似于其他语言（例如 C++，Java 等）中的 for 循环。它包含 3 个部分：

1. 变量/迭代器的初始化在执行 for 循环之前执行。
2. 每次执行循环之前要检查的条件。
3. 循环执行后每次执行的步骤。

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
for (var i = 0; i < length; i++) {
  console.log(arr[i]);
}

输出：

1
2
3
4
5
6

我们使用迭代器 i，并使用 for 循环遍历数组，该循环在每次迭代后将 i 增加 1，并将其移动到 next 元素。

在 JavaScript 中使用 while 循环来循环遍历数组

while 循环非常简单，因为它具有在每次迭代后都要检查的条件，除非满足该条件，否则它将继续执行。

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
let i = 0;

while (i < length) {
  console.log(arr[i]);
  i++;
}

像 for 循环一样，我们采用迭代器 i 并将其增加直到数组的长度遍历所有元素。

在 JavaScript 中使用 do...while 循环循环遍历数组

do...while 循环与 while 循环相同，不同之处在于即使循环条件为 false，它也至少执行一次。因此，在编写此循环时我们必须小心。

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
var i = 0;

do {
  console.log(arr[i]);
  i++;
} while (i < length);

在 JavaScript 中使用 forEach 循环循环遍历数组

ES5 引入了 forEach 作为迭代数组的新方法。forEach 接受一个函数作为参数，并为数组内存在的每个元素调用它。

const arr = [1, 2, 3, 4, 5, 6];
arr.forEach(item => console.log(item));

在这里，我们编写了一个箭头函数，以打印出传递给该函数的参数，并将该函数赋予 forEach 以遍历数组并打印该元素。

在 JavaScript 中使用 for...of 遍历数组

ES6 引入了可迭代对象的概念，并提供了 for ... of，可用于迭代 Array 对象。

let arr = [1, 2, 3, 4, 5, 6];
for (const item of arr) {
  console.log(item);
}

我们将其用作常规循环，但可以轻松地迭代各种各样的对象，而不仅仅是数组。

在 JavaScript 中使用 for...in 遍历数组

我们可以使用 for ... in 来迭代数组，但是不建议这样做，因为它会枚举对象的属性。它甚至枚举了数组元素之外的附加到 Array.prototype 的方法。

var arr = [1, 2, 3, 4, 5, 6];

for (var i in arr) {
  console.log(arr[i]);
}

在 JavaScript 中使用 map 方法遍历数组

map 方法遍历数组，在每个元素上使用回调函数，然后返回一个新数组，即，它接受输入数组并将其映射到新数组，并由回调函数执行计算。

arr = [1, 2, 3, 4, 5, 6];
const square = (x) => {
  return Math.pow(x, 2);
} mapped = arr.map(square);
console.log(arr);
console.log(mapped);

在这里，我们遍历了输入数组，并形成了一个在数组内部具有元素正方形的数组。

在 JavaScript 中使用 reduce 方法遍历数组

reduce 方法在数组上循环并调用 reducer 函数，以通过累加器函数存储数组计算的值。累加器是在所有迭代中都记住的变量，用于存储遍历数组的累加结果。

const arr = [1, 2, 3, 4];
const reducer = (accumulator, curr) => accumulator + curr;
console.log(arr.reduce(reducer));

在这里，我们遍历数组并求和一个累加器中的所有元素。

在 JavaScript 中使用 filter 方法遍历数组

filter 方法循环遍历数组并滤除满足特定给定条件的元素。

const fruits =
    ['apple', 'orange', 'pomegranete', 'banana', 'pear', 'blueberry'];
const result = fruits.filter(word => word.length > 6);
console.log(result);

在这里，我们遍历数组，检查给定的水果名称的长度是否大于 6。如果是，则将其包含在结果数组中，即，我们过滤掉所需的元素。

在 JavaScript 中使用 some 遍历数组

它用于遍历数组并检查数组中存在的至少一个元素是否满足给定条件。

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.some(under_three));

在这里，我们使用 some 来检查数组中是否存在小于 3 的元素。它返回布尔值 true 或 false。

在 JavaScript 中使用 every 遍历的数组

它用于遍历数组，并检查数组内的所有元素是否满足给定条件。

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.every(under_three));

在这里，我们使用 every 来检查数组中存在的所有元素是否小于 3。它返回布尔值 true 或 false。