本教程解释了如何在 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

遍历数组
JS数组遍历，基本就是for,forin,foreach,forof,map等等一些方法.
1.普通for循环

for(i = 0; i < arr.length; i++) {
   console.log(arr)
} 

2.优化for循环

for(i = 0,len=arr.length; i < len; i++) {
 console.log(arr)
}

3.弱化版for循环

for(i = 0; arr[i]!=null; i++) {
   
}

4.foreach循环

arr.forEach(function(e){  
   
});

5.foreach变种

Array.prototype.forEach.call(arr,function(el){  
   
});

6.forin循环

for(i in arr) {
   
}

7.map遍历

arr.map(function(n){  
   
});

8.forof遍历(需要ES6支持)

for(let value of arr) {  
   
});

1.for 循环：

for (let index=0; index < someArray.length; index++) {
 const elem = someArray[index];
 // ···
}

2.for-in 循环：

for (const key in someArray) {
 console.log(key);
}

3.数组方法 .forEach()：

someArray.forEach((elem, index) => {
 console.log(elem, index);
});

4.for-of 循环：

for (const elem of someArray) {
 console.log(elem);
}

for循环案例
1.for循环 [ES1]
JavaScript 中的 for 循环很古老，它在 ECMAScript 1 中就已经存在了。for 循环记录 arr 每个元素的索引和值：

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (let index=0; index < arr.length; index++) {
 const elem = arr[index];
 console.log(index, elem);
}

// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'

for 循环的优缺点是什么？

1.它用途广泛，但是当我们要遍历数组时也很麻烦。
2.如果我们不想从第一个数组元素开始循环时它仍然很有用，用其他的循环机制很难做到这一点。
2.for-in循环 [ES1]
for-in 循环与 for 循环一样古老，同样在 ECMAScript 1中就存在了。下面的代码用 for-in 循环输出 arr 的 key：

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const key in arr) {
 console.log(key);
}

// Output:
// '0'
// '1'
// '2'
// 'prop'

for-in 不是循环遍历数组的好方法：、
1.它访问的是属性键，而不是值。
2.作为属性键，数组元素的索引是字符串，而不是数字。
3.它访问的是所有可枚举的属性键（自己的和继承的），而不仅仅是 Array 元素的那些。
数组方法.forEach()[ES5]
鉴于 for 和 for-in 都不特别适合在数组上循环，因此在 ECMAScript 5 中引入了一个辅助方法：Array.prototype.forEach()：

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

arr.forEach((elem, index) => {
 console.log(elem, index);
});

// Output:
// 'a', 0
// 'b', 1
// 'c', 2

这种方法确实很方便：它使我们无需执行大量操作就能够可访问数组元素和索引。如果用箭头函数（在ES6中引入）的话，在语法上会更加优雅。
中止 .forEach() 的解决方法
如果想要中止 .forEach() 之类的循环，有一种解决方法：.some() 还会循环遍历所有数组元素，并在其回调返回真值时停止。

const arr = ['red', 'green', 'blue'];
arr.some((elem, index) => {
 if (index >= 2) {
 return true; // 中止循环
 }
 console.log(elem);
 //此回调隐式返回 `undefined`，这
 //是一个伪值。 因此，循环继续。
});

// Output:
// 'red'
// 'green'

for-of循环 [ES6]

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const elem of arr) {
 console.log(elem);
}
// Output:
// 'a'
// 'b'
// 'c'

for-of 和可迭代对象
for-of 不仅可以遍历数组，还可以遍历可迭代对象，例如遍历 Map：

const myMap = new Map()
 .set(false, 'no')
 .set(true, 'yes')
;
for (const [key, value] of myMap) {
 console.log(key, value);
}

// Output:
// false, 'no'
// true, 'yes'

遍历 myMap 会生成 [键，值] 对，可以通过对其进行解构来直接访问每一对数据。
for-of 和数组索引
数组方法 .entries() 返回一个可迭代的 [index，value] 对。如果使用 for-of 并使用此方法进行解构，可以很方便地访问数组索引：

const arr = ['chocolate', 'vanilla', 'strawberry'];

for (const [index, elem] of arr.entries()) {
 console.log(index, elem);
}
// Output:
// 0, 'chocolate'
// 1, 'vanilla'
// 2, 'strawberry'