JS数组遍历方法这么多,for/forEach/forof我该怎么选?

在 JavaScript 里,forEachforfor...of 循环都能用来遍历数组,不过适用场景存在差异,下面为你详细分析:

1. for 循环

这是一种较为基础的循环结构,它的优势在于能够灵活控制循环的起始、结束条件以及步长。

javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

适用场景 :当你需要精确控制循环的索引,比如在循环中对索引进行一些运算,或者需要反向遍历数组时,for 循环是不错的选择。

2. forEach 方法

forEach 是数组的一个方法,它会为数组的每个元素执行一次提供的函数。

javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
    console.log(number);
});

适用场景 :当你只需要对数组的每个元素执行相同的操作,且不需要中途跳出循环时,forEach 方法可以让代码更加简洁易读。不过,forEach 不能使用 breakcontinue 语句来控制循环流程。

3. for...of 循环

for...of 循环可以遍历可迭代对象,包括数组、字符串、Set、Map 等。

javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
    console.log(number);
}

适用场景 :当你只关心数组元素的值,而不关心索引,并且需要使用 breakcontinue 语句来控制循环流程时,for...of 循环是比较合适的选择。

总结

  • 若要精确控制索引,或需要反向遍历数组,推荐使用 for 循环。
  • 若仅需对数组元素执行相同操作,且无需中途跳出循环,使用 forEach 方法会让代码更简洁。
  • 若只关注元素值,且需要使用 breakcontinue 控制循环,建议使用 for...of 循环。

如果都可以的场景,优先推荐哪一种?

在各种循环方式都适用的场景下,优先推荐使用 for...of 循环,以下是具体原因:

1. 代码简洁性与可读性

和传统的 for 循环相比,for...of 循环不需要手动管理索引变量,代码结构更加简洁。它能让阅读代码的人迅速理解你只是想逐个访问数组里的元素。例如:

javascript 复制代码
const arr = [10, 20, 30];

// 使用 for...of 循环
for (const num of arr) {
    console.log(num);
}

// 使用传统 for 循环
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

可以看到,for...of 循环的代码更加简洁直观。

2. 灵活性

for...of 循环允许使用 breakcontinue 语句,这使得在循环过程中可以根据特定条件灵活控制循环流程,而 forEach 方法无法使用这些语句。例如,当遇到特定元素时跳出循环:

javascript 复制代码
const arr = [10, 20, 30, 40, 50];
for (const num of arr) {
    if (num === 30) {
        break;
    }
    console.log(num);
}

3. 可迭代对象的通用性

for...of 循环不仅能用于数组,还能用于其他可迭代对象,像字符串、Set、Map 等。这意味着在处理不同类型的可迭代数据时,你可以使用统一的循环方式。例如:

javascript 复制代码
// 遍历字符串
const str = 'hello';
for (const char of str) {
    console.log(char);
}

// 遍历 Set
const set = new Set([1, 2, 3]);
for (const value of set) {
    console.log(value);
}

4. 性能表现

在大多数情况下,for...of 循环的性能和传统 for 循环相近,而且比 forEach 方法更好,因为 forEach 方法在调用回调函数时会有额外的函数调用开销。

综上所述,在各种循环方式都适用的场景下,for...of 循环是一个更优的选择。

什么!你用map或reduce?

相关推荐
景籬几秒前
前端必会知识
前端·面试
walking9571 分钟前
在SCSS中使用BEM命名规范
前端·css
用户1456775610371 分钟前
电脑越用越慢?问题可能出在重复文件,一招彻底解决
前端
天天向上10247 分钟前
vue让elementUI和elementPlus标签内属性支持rem单位
javascript·vue.js·elementui
罗会27 分钟前
TailWindCss安装使用教程
前端
小宁爱Python33 分钟前
Vue入门:vue项目的创建和基本概念
前端·javascript·vue.js
二闹35 分钟前
前端研发岗位PWA相关面试题总结和解析
前端·面试
活着也很快乐1 小时前
Element-plus 离线文档部署
前端
徐知行1 小时前
前后端对时最佳实现
javascript
子林super1 小时前
公司日志中心ELK使用指南
前端