ES6引入了迭代器和for-of循环，这些新特性使得 JavaScript 的迭代更加方便和灵活。本章节将结合代码示例来介绍迭代器和for-of循环。

1、迭代器（Iterator）

在ES6之前，JavaScript没有一种标准的迭代方式。而迭代器就是为了解决这个问题而被引入的。迭代器是一种能够顺序访问集合中每个元素的对象。它可以被用来遍历数组、字符串、Set、Map等数据结构。

在ES6中，我们可以通过Symbol.iterator来定义一个对象的迭代器。一个迭代器对象必须包含一个next()方法，该方法返回一个包含value和done两个属性的对象。value表示当前迭代器指向的元素的值，done表示是否已经遍历到了集合的末尾。

下面是一个简单的迭代器的实现：

let arr = [1, 2, 3];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

在上面的例子中，我们首先通过Symbol.iterator获取了数组的迭代器对象iterator。然后我们调用next()方法来遍历数组中的每个元素。当遍历到最后一个元素时，next()方法返回的对象的done属性为true。

除了数组，我们还可以通过迭代器来遍历其他集合类型，如字符串、Set、Map等。下面是一个字符串的迭代器的实现：

let str = "Hello World";
let iterator = str[Symbol.iterator]();
console.log(iterator.next()); // { value: 'H', done: false }
console.log(iterator.next()); // { value: 'e', done: false }
console.log(iterator.next()); // { value: 'l', done: false }
console.log(iterator.next()); // { value: 'l', done: false }
console.log(iterator.next()); // { value: 'o', done: false }
console.log(iterator.next()); // { value: ' ', done: false }
console.log(iterator.next()); // { value: 'W', done: false }
console.log(iterator.next()); // { value: 'o', done: false }
console.log(iterator.next()); // { value: 'r', done: false }
console.log(iterator.next()); // { value: 'l', done: false }
console.log(iterator.next()); // { value: 'd', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

2、for-of 循环

for-of循环是ES6中的另一个迭代特性。它提供了一种简单的方式来遍历集合中的每个元素。for-of循环遍历的集合必须是可迭代的，即具有Symbol.iterator属性的对象。

下面是一个for-of循环遍历数组的例子：

let arr = [1, 2, 3];
for(let value of arr){
  console.log(value);
}
// 1
// 2
// 3

在上面的例子中，我们通过for-of循环遍历了数组arr中的每个元素，并且将每个元素的值打印出来了。

除了数组，我们还可以使用for-of循环来遍历其他可迭代的集合类型，如字符串、Set、Map等。下面是一个使用for-of循环遍历字符串的例子：

let str = "Hello World";
for(let value of str){
  console.log(value);
}
// H
// e
// l
// l
// o
//  
// W
// o
// r
// l
// d

通过上面的例子，我们可以看到使用for-of循环遍历字符串时，每次循环输出的都是字符串中的一个字符。

3、可迭代对象（Iterable）

在ES6中，迭代器和for-of循环都是基于可迭代对象（Iterable）实现的。可迭代对象是具有Symbol.iterator属性的对象，该属性指向一个迭代器函数。

迭代器函数是一个返回迭代器对象的函数，它可以被用来遍历集合中的元素。当使用for-of循环或者手动调用迭代器对象的next()方法时，迭代器函数将会被调用，并返回一个迭代器对象，该对象用来访问集合中的元素。

下面是一个自定义可迭代对象的例子：

let range = {
  start: 1,
  end: 5,
  [Symbol.iterator]() {
    let current = this.start;
    let last = this.end;
    return {
      next() {
        if(current <= last){
          return {value: current++, done: false};
        } else {
          return {done: true};
        }
      }
    }
  }
};
for(let value of range){
  console.log(value);
}
// 1
// 2
// 3
// 4
// 5

在上面的例子中，我们定义了一个range对象，该对象具有start和end两个属性。我们通过定义Symbol.iterator属性来让range对象成为可迭代的。Symbol.iterator属性指向一个迭代器函数，该函数返回一个迭代器对象。迭代器对象包含next()方法，用来遍历range对象中的每个元素。

在for-of循环中，我们遍历了range对象中的每个元素，并将其打印出来了。

小结
ES6引入了迭代器和for-of循环，使得JavaScript的迭代更加方便和灵活。迭代器是一种能够顺序访问集合中每个元素的对象，它可以被用来遍历数组、字符串、Set、Map等数据结构。for-of循环是ES6中的另一个迭代特性，它提供了一种简单的方式来遍历集合中的每个元素，并且比传统的for循环语法更加直观和易于理解。