前端学习手册-JavaScript数组遍历12种高效方法(十七)

示例：

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

const fruits = ['苹果', '香蕉', '橙子', '葡萄', '梨'];

一、for 循环

for (let i = 0; i < numbers.length; i++) {
  console.log(`索引 ${i}: ${numbers[i]}`);
}

可以使用 break、continue 控制循环流程

语法相对冗长

需要手动管理索引变量

代码可读性较差

二、for...of 循环​​​​​​​

for (const fruit of fruits) {
  console.log(fruit);
}

直接访问元素值，不需要通过索引获取

三、forEach() 方法​​​​​​​

numbers.forEach((number, index) => {
  console.log(`索引 ${index}: ${number}`);
});

函数式编程风格，更符合现代JS习惯

无法使用 break、continue 提前终止循环

不支持 return 跳出当前函数

四、map() 方法 - 返回新数组​​​​​​​

const doubledNumbers = numbers.map(num => num * 2);
console.log('原始数组:', numbers);
console.log('新数组 (每个元素翻倍):', doubledNumbers);

不改变原数组，返回新数组

链式调用友好

代码简洁，可读性高

无法中途中断循环

五、filter() 方法 - 过滤元素​​​​​​​

const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log('原始数组:', numbers);
console.log('偶数数组:', evenNumbers);

不改变原数组，返回过滤后的新数组

六、reduce() 方法 - 累加计算​​​​​​​

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log('数组元素总和:', sum);

七、some() 方法 - 检查是否至少有一个元素满足条件​​​​​​​

const hasEvenNumber = numbers.some(num => num % 2 === 0);
console.log('是否包含偶数:', hasEvenNumber);

一旦找到符合条件的元素就会立即返回，不遍历剩余元素

八、every() 方法 - 检查是否所有元素都满足条件​​​​​​​

const allEvenNumber = numbers.every(num => num % 2 === 0);
console.log('是否所有元素都是偶数:', allEvenNumber);

一旦发现不满足条件的元素就会立即返回

九、find() 方法 - 返回第一个满足条件的元素​​​​​​​

const firstEven = numbers.find(num => num % 2 === 0);
console.log('第一个偶数:', firstEven);

一旦找到匹配元素就会立即返回

直接返回匹配的元素值，使用方便

找不到元素时返回undefined

十、findIndex() 方法 - 返回第一个满足条件的元素索引​​​​​​​

const firstEvenIndex = numbers.findIndex(num => num % 2 === 0);
console.log('第一个偶数的索引:', firstEvenIndex);

十一、for...in 循环 (不推荐用于数组，但可以遍历)​​​​​​​

for (const index in fruits) {
  console.log(`索引 ${index}: ${fruits[index]}`);
}

十二、keys(), values(), entries() 方法​​​​​​​

console.log('数组键 (索引):', Array.from(numbers.keys()));
console.log('数组值:', Array.from(numbers.values()));
console.log('数组键值对:', Array.from(numbers.entries()));

使用entries()遍历​​​​​​​

for (const [index, value] of numbers.entries()) {
  console.log(`索引 ${index}: ${value}`);
}

选择建议:

1. 简单遍历且不需要返回值 ：优先使用 forEach() 或 for...of

2. 需要返回新数组 ：使用 map()

3. 需要筛选元素 ：使用 filter()

4. 需要聚合计算 ：使用 reduce()

5. 需要条件检查 ：使用 some() 或 every()

6. 需要查找元素 ：使用 find() 或 findIndex()

7. 需要精确控制循环流程 ：使用传统 for 循环

8. 遍历对象 ：使用 for...in （注意配合hasOwnProperty检查）或 Object.keys()/values()/entries()

根据具体场景选择合适的遍历方法，可以提高代码的可读性、性能和维护性。