ES6 迭代器和for-of循环-ES6入门指南

当前位置:　首页>> 技术小册>> ES6入门指南

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循环语法更加直观和易于理解。

该分类下的相关小册推荐：

深入学习前端重构知识体系

Javascript编程指南

web前端开发性能优化实战

零基础学JavaScript

WebSocket入门与案例实战

Node.js 开发实战

javascript设计模式原理与实战

剑指javascript

Flutter核心技术与实战

Javascript重点难点实例精讲（一）

npm script实战构建前端工作流

KnockoutJS入门指南