JavaScript 循环遍历数组的11种方法

本教程解释了如何在 JavaScript 中循环遍历数组。根据我们的用例和代码的速度/效率，我们可以使用 Vanilla JavaScript 中的传统方法（如for循环和while循环）或使用 ES5、ES6（如forEach、for ... of、 ）和许多其他方法引入的新方法来做到这一点。for ... in

目录

1.在JavaScript 中使用for循环遍历

2.在JavaScript 中使用while循环遍历

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

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

5.用于for. . .of在JavaScript 中循环遍历

6.用于for. . .in在JavaScript中循环遍历

7. 在JavaScript 中使用该map方法循环遍历遍历

8.在JavaScript 中使用该reduce方法循环遍历遍历

9.在JavaScript 中使用该filter方法循环遍历遍历

10.用于every在JavaScript中循环遍历

11.用于some在JavaScript中循环遍历

---

1.在JavaScript 中使用for循环遍历

传统for循环类似于forC++、Java 等其他语言中的循环。它有 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递增1并将其移动到元素。i 1 next

2.在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并增加它直到数组的长度循环遍历所有元素。

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

 do...while循环与循环相同，只是while即使循环条件为假，它也至少执行一次。所以，我们在编写这个循环时必须小心。

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

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

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

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

 在这里，我们编写了一个箭头函数来打印传递给函数的参数，并赋予该函数forEach迭代数组并打印该元素。

5.用于for. . .of在JavaScript 中循环遍历

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

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

我们将它用作普通循环，但可以轻松迭代各种对象而不仅仅是数组。 

6.用于for. . .in在JavaScript中循环遍历

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

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

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

7. 在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);

在这里，我们迭代了输入数组并形成了一个数组，其中包含数组中的元素正方形 

8.在JavaScript 中使用该reduce方法循环遍历遍历

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

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

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

9.在JavaScript 中使用该filter方法循环遍历遍历

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

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

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

10.用于every在JavaScript中循环遍历
 

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

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

11.用于some在JavaScript中循环遍历

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

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

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