从in到of，for循环又进化了

提到遍历数组，最先想到的莫过于for循环，从数组第一位开始到最后一位逐个取值。这种传统方式虽然可以满足大多数的需求，但是在遍历数组过程中却并不能真正的访问数组元素的值，而是只能访问数组的索引，这就显得有些不够灵活。

从ES6开始，javascript提供了一种新的遍历方式，这就是for...of循环。相对于传统方式for...in，for...of不再返回索引，而是返回数组的元素值，大大降低了数组元素的取值成本。

使用方法

for...of循环的基本语法如下：

for (variable of iterable) {
  // 循环主体
}

其中，

• variable是要遍历的变量，可以是任何可以用来存储值的变量。
• iterable是要遍历的对象，可以是数组、字符串、Set、Map或其他可迭代对象。

for...of循环会自动迭代iterable对象，并在每次迭代时将当前元素的值赋值给variable变量。

与for...in的区别

for...in循环也是一种遍历对象的循环，但是它与for...of循环有以下几点区别：

• for...in循环遍历的是对象的属性，而for...of循环遍历的是对象的元素。
• for...in循环的迭代顺序是不确定的，而for...of循环的迭代顺序是确定的。
• for...in循环可以遍历对象的所有属性，包括非枚举属性和继承的属性，而for...of循环只能遍历对象的枚举属性。

优点

相对于for...in循环，for...of循环具有以下优点：

• 更简洁明了。for...of循环的语法更简洁明了，更容易理解和使用。
• 更高效。for...of循环的效率更高，因为它只需要遍历对象的元素，而不需要遍历对象的属性。
• 更安全。for...of循环不会遍历非枚举属性和继承的属性，因此不会出现意外结果。

注意问题

在使用for...of循环时需要注意以下问题：

• for...of循环只能遍历可迭代对象。如果要遍历一个不可迭代的对象，需要先将其转换为可迭代对象。
• for...of循环不能修改被遍历的对象。如果要修改被遍历的对象，需要使用for...in循环或其他方法。
• for...of循环的迭代顺序是确定的，但是如果在循环过程中修改了被遍历的对象，则迭代顺序可能会发生变化。

结语

for...of循环是ES6中新增的一种遍历方式，它相对于传统的for...in循环具有诸多优点。在实际开发中，我们应该优先使用for...of循环来遍历数组和字符串等可迭代对象。