JS 遍历数组 （ 11 种方法 ）

还是大剑师兰特 ：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN 知名博主，GIS 领域优质创作者，深耕 openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts 等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers【入门教程】–【源代码 + 示例 300+】
2	Leaflet【入门教程】–【源代码 + 图文示例 150+】
3	Cesium【入门教程】–【源代码 + 图文示例 200+】
4	MapboxGL【入门教程】–【源代码 + 图文示例 150+】
5	前端就业宝典【面试题 + 详细答案 1000+】

文章目录

• • • 1. `for` 循环
    • 2. `for…of` 循环 (ES6+)
    • 3. `forEach()` 方法
    • 4. `map()` 方法
    • 5. `filter()` 方法
    • 6. `reduce()` 方法
    • 7. `entries()`, `keys()`, `values()` 结合 `for…of` (ES6+)
    • 8. `find()` 方法
    • 9. `findIndex()` 方法
    • 10. `some()` 方法
    • 11. `every()` 方法

---

JavaScript 中遍历数组的有哪些方法呢？下面列出 11 种方法，包括语法、注意事项、示例代码等。

1. for 循环

语法 :

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

注意事项 :

• 通常配合数组的 .length 属性使用。
• 索引从 0 开始，需要注意边界问题。

代码示例 :

let fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i  fruits.length; i++) {
  console.log(fruits[i]);
}

2. for...of 循环 (ES6+)

语法 :

for (let item of array) {
  console.log(item);
}

注意事项 :

• 用于遍历可迭代对象（如数组）的值，不提供索引。
• 不适用于需要索引的操作。

代码示例 :

let colors = ['red', 'green', 'blue'];
for (let color of colors) {
  console.log(color);
}

3. forEach() 方法

语法 :

array.forEach(function(currentValue, index, array) {
  
}, thisArg);

注意事项 :

• 不返回值，主要用于无返回值的遍历操作。
• 提供了元素值、索引和数组本身的引用，但无法中断循环。

代码示例 :

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((num, idx) => {
  console.log(`${idx}: ${num}`);
});

4. map() 方法

语法 :

let newArray = array.map(function(currentValue, index, array) {
  return ;
}, thisArg);

注意事项 :

• 创建并返回一个新数组，其中的元素是原数组元素经过回调函数处理后的结果。
• 不会改变原数组。

代码示例 :

let squares = [1, 2, 3].map(n => n * n);
console.log(squares); 

5. filter() 方法

语法 :

let filteredArray = array.filter(function(currentValue, index, array) {
  return ;
}, thisArg);

注意事项 :

• 创建并返回一个新数组，其中包含了原数组中满足条件的元素。
• 不会改变原数组。

代码示例 :

let evenNumbers = [1, 2, 3, 4, 5].filter(num => num % 2 === 0);
console.log(evenNumbers); 

6. reduce() 方法

语法 :

let result = array.reduce(function(accumulator, currentValue, index, array) {
  return ;
}, initialValue);

注意事项 :

• 将数组元素累积计算成一个单一的返回值。
• 需要一个初始值，如果不提供，则默认取数组的第一项和第二项开始计算。

代码示例 :

let sum = [1, 2, 3, 4, 5].reduce((total, num) => total + num, 0);
console.log(sum); 

7. entries(), keys(), values() 结合 for...of (ES6+)

语法 :

for (let [index, value] of array.entries()) {  }
for (let key of array.keys()) {  }
for (let value of array.values()) {  }

注意事项 :

• entries() 遍历索引和值。
• keys() 遍历索引。
• values() 遍历值。

代码示例 :

let array = ['a', 'b', 'c'];
for (let [index, value] of array.entries()) {
  console.log(`Index: ${index}, Value: ${value}`);
}

8. find() 方法

语法 :

let foundValue = array.find(function(currentValue, index, array) {
  return ;
}, thisArg);

注意事项 :

• 查找数组中第一个满足条件的元素，并返回该元素的值，如果没有找到符合条件的元素，则返回 undefined。
• 不改变原数组。

代码示例 :

let array = [1, 2, 3, 4, 5];
let foundNum = array.find(n => n > 3);
console.log(foundNum); 

9. findIndex() 方法

语法 :

let foundIndex = array.findIndex(function(currentValue, index, array) {
  return ;
}, thisArg);

注意事项 :

• 查找数组中第一个满足条件的元素的索引，如果没有找到符合条件的元素，则返回 -1。
• 不改变原数组。

代码示例 :

let array = [1, 2, 3, 4, 5];
let index = array.findIndex(n => n === 3);
console.log(index); 

10. some() 方法

语法 :

let isSomeTrue = array.some(function(currentValue, index, array) {
  return ;
}, thisArg);

注意事项 :

• 检查数组中是否存在至少一个满足条件的元素，存在则返回 true，否则返回 false。
• 不改变原数组。

代码示例 :

let array = [1, 2, 3, 4, 5];
let hasEven = array.some(n => n % 2 === 0);
console.log(hasEven); 

11. every() 方法

语法 :

let isAllTrue = array.every(function(currentValue, index, array) {
  return ;
}, thisArg);

注意事项 :

• 检查数组中所有元素是否都满足条件，全部满足则返回 true，否则返回 false。
• 不改变原数组。

代码示例 :

let array = [1, 2, 3, 4, 5];
let allLessThan6 = array.every(n => n  6);
console.log(allLessThan6); 

综上所述，JavaScript 提供了多种遍历数组的方式，可以根据具体需求选择合适的方法。