ES6之迭代器(Iterator)

? 专栏介绍

在现代Web开发中，JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性，还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言，JavaScript具有广泛的应用场景，并且不断发展演进。在本专栏中，我们将深入学习JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。让我们一起开始JavaScript之旅吧！

---

引言

ES6引入了迭代器的概念，这个特性为JavaScript带来了更强大的迭代和异步编程能力。本文将深入探讨ES6的迭代器，介绍其概念、用法以及在实际开发中的应用。

迭代器（Iterator）是ES6引入的一种新的数据结构，它提供了一种统一的遍历机制，可以用来遍历各种不同类型的数据。迭代器的概念、作用和遍历原理如下所述：

1. 概念

迭代器是一种对象，它提供了一种顺序访问集合中每个元素的方式，而不暴露集合内部的表示。通过调用迭代器的next()方法，可以依次获取集合中的每个元素，并返回一个包含value和done属性的对象。value表示当前元素的值，done表示是否已经遍历完所有元素。

2. 作用

迭代器提供了一种统一的遍历机制，使得我们可以使用相同的方式来访问不同类型的数据结构。无论是数组、字符串、Set、Map还是自定义对象，只要实现了迭代器接口，就可以使用for...of循环或者手动调用next()方法来进行遍历。

3. 遍历原理

当我们使用for…of循环或者手动调用next()方法时，迭代器会按照预定的顺序依次返回集合中的每个元素。具体原理如下：

• 首先，在需要进行遍历操作时，我们通过调用集合对象上的Symbol.iterator方法获取到该集合对象对应的默认迭代器。
• 然后，在每次调用next()方法时，迭代器会执行相应的操作，并返回一个包含value和done属性的对象。
• 如果done为false，则表示还有更多的元素需要遍历，此时value属性表示当前遍历到的值。
• 如果done为true，则表示已经遍历完所有元素，此时value属性为undefined。

4. 使用示例

示例一：

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 }

在上面的例子中，我们首先通过调用数组arr上的Symbol.iterator方法获取到数组的默认迭代器。然后，我们通过调用next()方法依次获取数组中的每个元素。在每次调用next()方法时，迭代器会返回一个包含当前元素值和是否遍历完所有元素的对象。

通过迭代器，我们可以方便地遍历不同类型的数据结构，并且可以自定义实现迭代器接口来实现特定的遍历方式。这为我们在实际开发中提供了更大的灵活性和便利性。

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。至于属性名Symbol.iterator，它是一个表达式，返回Symbol对象的iterator属性，这是一个预定义好的、类型为 Symbol 的特殊值，所以要放在方括号内。

示例二：

自定义迭代器遍历斐波那契数列：

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0,
      cur = 1
    return {
      next() {
        [pre, cur] = [cur, pre + cur]
        return { value: cur, done: false }
      }
    }
  }
}
for (let num of fibonacci) {
  if (num > 1000) break
  console.log(num)
}

// 输出：
// 1
// 2
// 3
// 5
// ...

在这个示例中，我们通过自定义迭代器接口来遍历斐波那契数列。在每次迭代时，迭代器会计算下一个斐波那契数，并返回给遍历循环。

简单原理实现示例

function createIterator(arr) {
  let index = 0
  return {
    next() {
      if (index < arr.length) {
        return { value: arr[index++], done: false }
      } else {
        return { value: undefined, done: true }
      }
    }
  }
}
let iterator = createIterator([1, 2, 3])
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 }

在这个示例中，我们通过自定义函数createIterator来实现一个迭代器。该函数返回一个包含next()方法的对象，每次调用next()方法时，会依次返回数组中的每个元素。

---

😶 写在结尾

前端设计模式专栏

设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏