ES6 Iterator接口和for...of循环用法分析

ES6引入了Iterator接口，为JavaScript提供了统一的数据遍历访问方式，而for...of循环则是对Iterator接口的应用，我们可以用for...of语法循环遍历具有Iterator接口的数据结构。

Iterator接口概述

Iterator接口是一个具有next方法并且返回一个包含value和done属性的对象的数据结构。其中，value表示当前值，done表示遍历是否完成。

在ES6中，有许多数据结构默认自带了Iterator：Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象等。

我们可以通过for...of循环遍历这些带有Iterator接口的数据结构。

for...of循环

for...of循环的语法如下所示：

for (let value of iterable) {
  // 遍历操作
}

其中，value表示当前循环到的元素值，iterable表示需要遍历的数据结构。

for...of循环遍历的是指针对象的值，因此不会遍历对象的属性，而只会遍历出数组和类数组的索引元素。

下面用两个例子详细介绍for...of循环的用法。

例子一：遍历数组

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

在这个例子中，我们使用数组arr进行实验，通过for...of循环遍历了数组的所有元素。在每次循环中，变量value分别等于1、2和3，最终输出到控制台相应的值。

例子二：遍历字符串

我们还可以用for...of循环遍历字符串。

const str = 'hello world';
for (let s of str) {
  console.log(s);
}
// 输出：h e l l o   w o r l d

在这个例子中，我们使用字符串str进行实验，通过for...of循环遍历了字符串的所有字符。在每次循环中，变量s分别等于字符串中每一个字符，最终输出到控制台相应的值。

总结

本文主要介绍了ES6中Iterator接口和for...of循环的用法。Iterator接口提供了一种通用的遍历数据结构的方法，而for...of循环则是对这种方法的应用。我们可以尝试对各种数据结构进行遍历，以加深对该特性的理解和使用。