在 JavaScript 开发过程中，经常需要对数组或者对象进行遍历操作。以往我们通常使用的是 for-in 循环，它可以对对象进行迭代遍历。但是对于数组的遍历，for-in 循环会把数组的所有属性都遍历出来，包括数组原型链上的属性，导致效率较低。同时当我们对一些数据进行操作时，使用 for-in 循环可能会造成一些意外的问题，如遍历的属性是不可枚举的，或者是遍历的属性不是按照预期的顺序遍历的。
ES6 中提供了 for-of 循环，它是一个更好的迭代遍历方法，可以避免 for-in 循环的一些问题，并且因为 for-of 循环迭代的对象必须是可迭代的，所以它的效率也比 for-in 循环更高。下面将详细介绍 for-of 循环在 JavaScript 中的使用以及其效率优势。
for-of 循环的语法
使用 for-of 循环遍历数组或者类数组对象时，可以采用以下代码：
let arr = [1, 2, 3];
for (let item of arr) {
console.log(item);
}使用 for-of 循环遍历 Map 或 Set 类型的数据时，可以采用以下代码：
let map = new Map();
map.set(0, 'zero');
map.set(1, 'one');
for (let [key, value] of map) {
console.log(key + ' = > ' + value);
}从上面的代码可以看出，for-of 循环可以和解构赋值语法一起使用，很方便。
for-of 循环遍历的对象必须是可迭代的
在使用 for-of 循环时，被遍历的对象必须是可迭代的，也就是必须实现了 @@iterator 方法，返回一个迭代器对象，这个迭代器对象有一个 next() 方法，调用该方法可以依次遍历该对象中的每个元素。
例如，数组对象实现了 @@iterator 方法，所以可以被 for-of 循环遍历：
let arr = [1, 2, 3]; let iterator = arr[Symbol.iterator](); console.log(iterator.next().value); // 输出 1 console.log(iterator.next().value); // 输出 2 console.log(iterator.next().value); // 输出 3
for-of 循环与 for-in 循环的比较
这里我们使用一个实例来比较 for-of 循环和 for-in 循环的效率差异。我们定义一个包含 100 万个元素的数组，然后对这个数组分别使用 for-of 循环和 for-in 循环进行遍历，然后比较它们的执行时间。
-- -------------------- ---- -------
-- ------- --- -------
--- --- - ---
--- ---- - - -- - - -------- ---- -
------------
-
-- -- ------ ------
-----------------------
--- ---- - --
--- ---- ---- -- ---- -
---- -- -----
-
--------------------------
-- -- ------ ------
-----------------------
--- ---- - --
--- ---- - -- ---- -
---- -- -------
-
--------------------------
------------------- ----- ------
------------------- ----- ------输出结果为：
for-of: 9.754ms for-a: 21.158ms
可以看到，for-of 循环的执行时间大概是 for-in 循环的一半。这是因为 for-of 循环不需要遍历对象的属性，而是直接遍历对象的值，所以效率更高。
总结
ES6 中的 for-of 循环在遍历数组、类数组对象、Map 对象、Set 对象等可迭代对象时都能提供较高的遍历效率。同时，for-of 循环不包括原型链属性，无须学习额外的抽象概念，因此代码更加清晰易懂。在实际开发中，我们应该掌握 for-of 循环的使用方法，以便提高 JavaScript 开发中的代码质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7377df6b2d6eab32b0605