JavaScript遍历数组的7种方式

注：纯手打，如有错误欢迎评论区交流！
转载请注明出处：https://blog.youkuaiyun.com/testleaf/article/details/144529177
编写此文是为了更好地学习前端知识，如果损害了有关人的利益，请联系删除！
本文章将不定时更新，敬请期待！！！
欢迎点赞、收藏、转发、关注，多谢！！！

一、for循环

1、语法

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

2、优点

• 性能较好，特别是在处理大型数组时。
• 允许使用索引来访问数组元素，可以进行复杂的索引操作。

3、缺点

• 写法相对繁琐，容易出错（例如忘记更新索引或数组越界）。

4、注意事项

• 确保不要使用 var 来声明索引变量 i，以避免闭包中的潜在问题。

二、for…of 循环

1、语法

for (const element of array) {
  console.log(element);
}

2、优点

• 语法简洁，易于阅读。
• 直接获取数组元素，不需要通过索引访问。

3、缺点：

• 无法直接访问索引，如果需要索引，则需要额外的处理。

4、注意事项

• 在迭代过程中，element 是对数组元素的直接引用（如果是对象，则为引用类型）。

三、forEach 方法

1、语法

array.forEach((element, index, array) => {
  console.log(element, index);
});

2、优点

• 语法简洁，内置方法，易于理解。
• 提供了元素和索引，以及整个数组作为参数。

3、缺点

• 无法使用 break 或 continue 语句提前退出循环。
• 回调函数的参数是固定的，不能改变。

4、注意事项

• 回调函数的 this 值在非严格模式下会自动指向全局对象（或 undefined 在严格模式下），需要注意 this 的指向。

四、map 方法

1、语法

const newArray = array.map((element, index, array) => {
  return element * 2; // 示例：每个元素乘以2
});

2、优点

• 创建一个新数组，每个元素是回调函数处理后的结果。
• 适用于需要对数组进行转换的场景。

3、缺点

• 不是纯粹的遍历方法，目的是生成新数组。
• 无法使用 break 或 continue 语句。

4、注意事项

• map 不会改变原数组，而是返回一个新数组。

五、for…in 循环

1、语法

for (const index in array) {
  if (array.hasOwnProperty(index)) {
    console.log(array[index]);
  }
}

2、优点

• 语法简洁（但不如 for...of）。

3、缺点

• for...in 遍历的是对象的可枚举属性，包括数组索引和自定义属性。
• 可能会遍历到数组原型链上的属性。
• 性能较差，不建议用于数组遍历。

4、注意事项

• 总是检查 hasOwnProperty 以避免遍历到原型链上的属性。
• 索引是字符串类型，需要转换为数字（如果需要）。

六、while 循环

1、语法

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

2、优点

• 在某些情况下，比 for 循环更灵活（例如需要复杂条件控制时）。

3、缺点

• 写法相对繁琐，容易出错（例如忘记更新索引或数组越界）。

4、注意事项

• 确保在循环体内正确更新索引变量 i。

七、do…while 循环

1、语法

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

2、优点

• 至少执行一次循环体，适用于需要至少执行一次操作的场景。

3、缺点

• 写法相对繁琐，容易出错（例如忘记更新索引或数组越界）。

4、注意事项

• 确保在循环体内正确更新索引变量 i。

八、总结

• 性能：for 循环通常性能最好，特别是在处理大型数组时。
• 简洁性：for...of 和 forEach 提供了简洁的语法。
• 灵活性：for 循环和 while 循环提供了更多的灵活性。
• 用途：map 适用于转换数组，forEach 适用于遍历并处理每个元素但不生成新数组。
• 选择哪种遍历方式取决于具体的需求和上下文。