for、for ...in、for ... of、forEach的区别

好多人都会搞不清楚这四种循环，来浅浅分析一下。

目录

1、for 循环语句

2、for...in循环 

3、for...of循环

4、forEach( )方法

---

1、for 循环

遍历数组

var arr = [1,2,3,4,5]
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);    
}

遍历对象（ for循环不可直接遍历对象，需要用Object.keys() 转化）

var obj = {a:1,b:2,c:3}  
var obj2 = Object.keys(obj)
for (let i = 0; i < obj2.length; i++) {
    console.log(obj2[i]+':'+obj[obj2[i]]);    
}

2、for...in 循环 

遍历对象 （for...in 用于遍历对象的属性key）

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key, obj[key]);
}

3、for...of 语句

遍历数组 （for...of 用于遍历可迭代对象的值value）

const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
  console.log(value);
}

遍历对象（for...of 语句不可直接遍历对象，需要用Object.keys() 转化）

const obj = { a: 1, b: 2, c: 3 };
const newObj = Object.keys(obj ); 
for (const key of newObj ) {
  console.log(key, obj[key]);
}

4、forEach( ) 方法

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。每次执行时，浏览器会将遍历到的元素以实参的形式传递过来，浏览器会在回调函数中传递三个参数：我们可以来定义形参，来读取这些内容：

遍历数组

const arr = [1, 2, 3, 4, 5];
arr.forEach(function(value,index,array) {
  console.log(value);           //当前正在遍历的元素 value
  console.log(index);           //当前正在遍历的元素的索引index
  console.log(array);           //当前正在遍历的数组array
});  

forEach( )方法只支持IE8以上的浏览器 ,对象不支持forEach 属性或方法。数组中有几个元素，就会调用执行几次函数。

总结：

• 如果你需要迭代数组的元素，推荐使用 for...of 循环或 forEach 方法，因为它们更简洁和易读。
• for 循环适用于需要更精确控制迭代过程的情况。
• for...in 循环适用于迭代对象的属性，不应该用于迭代数组。
• 在处理可迭代对象时，优先使用 for...of 循环，因为它是迭代的通用方式。

 ps：

• 迭代是一个通用的概念，指的是通过重复执行一组操作来访问数据结构中的元素，直到满足某个条件为止。
• 遍历是迭代的一种特殊形式，通常用于访问和处理数据结构中的所有元素，确保每个元素都被访问一次且不重复。