解密 arrify 源码：理解遍历器接口与 JavaScript 迭代

2023-11-09 07:15:49

前言

在前端开发中，我们经常需要处理各种数据集合，而迭代器接口正是处理数据集合的利器。arrify 库是一个将可迭代对象转换成数组的工具库，其内部使用了遍历器接口来实现。通过解读 arrify 源码，我们可以深入理解遍历器接口在 JavaScript 中的作用。

什么是遍历器接口？

遍历器接口是一个 JavaScript 内置的接口，它定义了迭代器对象的行为。迭代器对象可以被用来遍历数据集合，并逐个访问其中的元素。遍历器接口包含两个主要方法：

next()：返回一个包含值和完成标志的对象。完成标志表示迭代是否已经结束。
Symbol.iterator：返回该对象本身，表示该对象是一个迭代器对象。

arrify 源码解读

arrify 库的源码非常简单，它只有一个函数，该函数接受一个可迭代对象作为参数，并返回一个由该可迭代对象中的元素组成的数组。

function arrify(iterable) {
  if (iterable == null) {
    return [];
  }

  if (Array.isArray(iterable)) {
    return iterable;
  }

  if (typeof iterable[Symbol.iterator] === "function") {
    return Array.from(iterable);
  }

  throw new TypeError("Object is not iterable");
}

从源码中可以看出，arrify 函数首先检查传入的参数是否为 null，如果是，则返回一个空数组。然后检查传入的参数是否为数组，如果是，则直接返回该数组。如果传入的参数既不是 null 也不是数组，则检查该参数是否具有 [Symbol.iterator] 属性，如果是，则使用 Array.from() 方法将该参数转换成数组并返回。如果传入的参数既不是 null、数组，也没有 [Symbol.iterator] 属性，则抛出一个 TypeError 异常。

手写实现遍历器接口对象

为了更深入地理解遍历器接口，我们可以手写一个实现遍历器接口的对象。例如，我们可以实现一个范围迭代器对象，它可以遍历一个指定范围内的数字。

class RangeIterator {
  constructor(start, end) {
    this.start = start;
    this.end = end;
    this.current = start - 1;
  }

  [Symbol.iterator]() {
    return this;
  }

  next() {
    if (this.current >= this.end) {
      return { done: true };
    }

    this.current++;
    return { value: this.current, done: false };
  }
}

const iterator = new RangeIterator(1, 10);

for (const number of iterator) {
  console.log(number);
}