在 JavaScript 的开发过程中，我们经常需要遍历数组或对象来处理数据。通常我们会使用 for 循环来实现这个目的，但是这种方式存在一些问题，比如代码可读性不高、易出错等。ES6 提供了 Iterator 和 for...of 循环这两个新特性，能够解决这些问题，提高代码的可读性和可维护性。
Iterator
Iterator 是 ES6 中的一个新特性，它是一种统一的遍历数据的机制，可以遍历所有可迭代对象。可迭代对象是指实现了 @@iterator 方法的对象，这个方法会返回一个迭代器对象。迭代器对象则包含 next 方法，每次调用 next 方法会返回一个包含 value 和 done 两个属性的对象，value 表示当前遍历到的值，done 表示是否遍历结束。下面是一个迭代器的示例：
let arr = [1, 2, 3];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: undefined, done: true }上面的代码中，我们先获取了数组的迭代器对象，然后使用 next 方法遍历数组。每次调用 next 方法都会返回一个包含当前值和是否遍历结束的对象。当遍历结束时，done 属性为 true，并且 value 属性为 undefined。
for...of 循环
for...of 循环是 ES6 中另一个新特性，它可以遍历所有可迭代对象。使用 for...of 循环可以让代码更加简洁、易读，同时也可以避免一些常见的错误。下面是一个使用 for...of 循环遍历数组的示例：
let arr = [1, 2, 3];
for (let item of arr) {
console.log(item);
}上面的代码中，我们使用 for...of 循环遍历数组，每次循环会将当前遍历到的值赋值给 item 变量。这种方式比使用 for 循环更加简洁、易读。
除了数组，for...of 循环还可以遍历其他可迭代对象，比如字符串、Set、Map 等。下面是一个使用 for...of 循环遍历字符串的示例：
let str = 'hello';
for (let char of str) {
console.log(char);
}使用 Iterator 和 for...of 代替 for 循环
使用 Iterator 和 for...of 循环可以让代码更加简洁、易读，同时也可以避免一些常见的错误。下面是一个使用 Iterator 和 for...of 循环代替 for 循环的示例：
let arr = [1, 2, 3];
let iter = arr[Symbol.iterator]();
for (let item = iter.next(); !item.done; item = iter.next()) {
console.log(item.value);
}上面的代码中，我们先获取了数组的迭代器对象，然后使用 for 循环遍历数组。每次循环会调用迭代器的 next 方法获取当前值，并判断是否遍历结束。这种方式比使用 for 循环更加繁琐，而且容易出错。
总结
使用 ES6 的 Iterator 和 for...of 循环可以让代码更加简洁、易读，同时也可以避免一些常见的错误。在实际开发过程中，我们应该尽量使用这两个新特性来遍历数据，从而提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6507efea95b1f8cacd31c37c