入门前端-《JavaScript 语言入门教程-iterator 迭代器》

阳光穿透心脏的1/2处 2022-08-30 11:50 121阅读 0赞

> 可迭代（Iterable） 对象是数组的泛化。这个概念是说任何对象都可以被定制为可在 `for..of`循环中使用的对象。数组是可迭代的。但不仅仅是数组。很多其他内建对象也都是可迭代的。例如字符串也是可迭代的。

# Symbol.iterator #

> 例如，我们有一个对象，它并不是数组，但是看上去很适合使用 `for..of` 循环。

比如一个 range 对象，它代表了一个数字区间：

let range = { 
      from: 1,
      to: 5
    };

// 我们希望 `for..of` 这样运行：  
// `for(let num of range) ... num=1,2,3,4,5`

为了让 `range` 对象可迭代（也就让 `for..of` 可以运行）我们需要为对象添加一个名为 `Symbol.iterator` 的方法（一个专门用于使对象可迭代的内置 `symbol`）。

完整实现：

请注意可迭代对象的核心功能：关注点分离。

*  `range` 自身没有 `next()` 方法。
 *  相反，是通过调用 `range[Symbol.iterator]()` 创建了另一个对象，即所谓的`“迭代器”`对象，并且它的 `next`会为迭代生成值。

# 字符串是可迭代的 #

> 数组和字符串是使用最广泛的内建可迭代对象。  
> 对于一个字符串，`for..of` 遍历它的每个字符：

for (let char of "test") { 
      // 触发 4 次，每个字符一次
      alert( char ); // t, then e, then s, then t
    }

# 显示调用迭代器 #

> 为了更深层地了解底层知识，让我们来看看如何显式地使用迭代器。  
> 我们将会采用与 `for..of` 完全相同的方式遍历字符串，但使用的是直接调用。这段代码创建了一个字符串迭代器，并“手动”从中获取值。

let str = "Hello";
    
    // 和 for..of 做相同的事
    // for (let char of str) alert(char);
    
    // 关键
    let iterator = str[Symbol.iterator]();
    
    while (true) { 
      let result = iterator.next();
      if (result.done) break;
      alert(result.value); // 一个接一个地输出字符
    }

很少需要我们这样做，但是比 `for..of` 给了我们更多的控制权。  
例如，我们可以拆分迭代过程：迭代一部分，然后停止，做一些其他处理，然后再恢复迭代。

# 可迭代（iterable）和类数组（array-like） #

> 有两个看起来很相似，但又有很大不同的正式术语。请你确保正确地掌握它们，以免造成混淆。

*  `Iterable` 如上所述，是实现了 `Symbol.iterator` 方法的对象。
 *  `Array-like` 是有索引和 `length` 属性的对象，所以它们看起来很像数组。

下面这个对象则是类数组的，但是不可迭代：

let arrayLike = {  // 有索引和 length 属性 => 类数组对象
      0: "Hello",
      1: "World",
      length: 2
    };
    
    // Error (no Symbol.iterator)
    for (let item of arrayLike) { }

可迭代对象和类数组对象通常都 不是数组，它们没有 push 和 pop 等方法。如果我们有一个这样的对象，并想像数组那样操作它，那就非常不方便。例如，我们想使用数组方法操作 range，应该如何实现呢？

## Array.from ##

> 有一个全局方法 `Array.from`可以接受一个可迭代或类数组的值，并从中获取一个“真正的”数组。然后我们就可以对其调用数组方法了。

例如：

let arrayLike = { 
      0: "Hello",
      1: "World",
      length: 2
    };
    
    let arr = Array.from(arrayLike); // (*)
    alert(arr.pop()); // World（pop 方法有效）

在 `(*)`行的 `Array.from` 方法接受对象，检查它是一个可迭代对象或类数组对象，然后创建一个新数组，并将该对象的所有元素复制到这个新数组。

# 总结 #

可以应用 `for..of` 的对象被称为 `可迭代的`。

*  技术上来说，可迭代对象必须实现 `Symbol.iterator` 方法。
 *  `obj[Symbol.iterator]()` 的结果被称为 迭代器（`iterator`）。由它处理进一步的迭代过程。
 *  一个迭代器必须有 `next()` 方法，它返回一个 `{done: Boolean, value: any}`对象，这里 `done:true`表明迭代结束，否则`value` 就是下一个值。
 *  `Symbol.iterator`方法会被`for..of`自动调用，但我们也可以直接调用它。
 *  内置的可迭代对象例如字符串和数组，都实现了 `Symbol.iterator`。
 *  字符串迭代器能够识别代理对（`surrogate pair`）。（译注：代理对也就是 `UTF-16` 扩展字符，图标文字。）

有`索引`属性和 `length` 属性的对象被称为`类数组对象`。这种对象可能还具有其他属性和方法，但是没有数组的内建方法。