JavaScript循环方法：forEach、for…in、for…of，深度解析！

众所周知，JavaScript诞生已经有20多年了。对于初学者而言，可能对JavaScript里的循环方法还略知一二，但说到掌握也是不敢说出口的。

今天，就为大家深度解析JavaScript里的循环方法：forEach、for…in、for…of。

从传统方法说起
这是我们一直使用的用来循环一个数组的方法：

var array = [1,2,3,4,5];

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

这种方法简单直接，但也有不足之处：

1. 必须知道数组的长度。
2. 循环时，不能中断循环（使用break语句或使用return语句）。
3. 不太好理解。

forEach方法的诞生
为了解决这些问题，JavaScript 5 引入了forEach方法。forEach方法可以让我们以更简单的方式来循环一个数组：

var array = [1,2,3,4,5];

array.forEach(function(item, index, array) {
  console.log(item);
});

forEach方法接受一个函数作为参数，该函数将在数组的每个元素上调用。函数的第一个参数是数组的当前元素，第二个参数是当前元素的索引，第三个参数是数组本身。

forEach方法具有以下优点：

1. 不必知道数组的长度。
2. 可以中断循环（使用break语句或使用return语句）。
3. 更容易理解。

for…in方法的引入
for…in方法可以让我们循环一个对象的所有属性：

var object = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (var property in object) {
  console.log(property);
}

for…in方法接受一个变量作为参数，该变量将在对象的每个属性上迭代。

for…in方法具有以下优点：

1. 可以循环一个对象的所有属性，无论属性是否可枚举。
2. 可以中断循环（使用break语句或使用return语句）。

for…of方法的诞生
for…of方法可以让我们循环一个数组或一个对象的可迭代属性：

var array = [1,2,3,4,5];

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

var object = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (var property of Object.keys(object)) {
  console.log(property);
}

for…of方法接受一个变量作为参数，该变量将在数组或对象的每个可迭代属性上迭代。

for…of方法具有以下优点：

1. 可以循环一个数组或一个对象的可迭代属性。
2. 不必知道数组或对象的长度。
3. 可以中断循环（使用break语句或使用return语句）。
4. 更容易理解。

总结

forEach、for…in和for…of方法都是循环的一种方式，但它们之间存在着一些区别。

方法	特点	优点	缺点
forEach	只能循环数组	不必知道数组的长度	不能中断循环
for…in	可以循环对象的所有属性	可以中断循环	可能会循环不可枚举的属性
for…of	可以循环数组或对象的每个可迭代属性	不必知道数组或对象的长度	不能中断循环

在实际开发中，我们可以根据具体情况选择合适的循环方法。