Javascript的迭代器和迭代接口详解

目录

• 1，什么是迭代器
• 2，自定义迭代接口
• 3，原生语言的迭代
• 总结

1，什么是迭代器

每一个可迭代对象都对应着一个可迭代接口[Symbol.iterator]；

[Symbol.iterator]接口并不是迭代器，他是一个迭代器工厂函数，调用该迭代接口即可返回一个待执行状态的迭代器；

不同的原生全局对象都对应着不同的迭代器；

const arr = new Array()
const map = new Map()
const set = new Set()

console.log(arr[Symbol.iterator]()) //Array Iterator {}
console.log(map[Symbol.iterator]()) //MapIterator {}
console.log(set[Symbol.iterator]()) //SetIterator {}

将迭代器状态从待执行状态变为真正的执行：调用迭代器对象的 .next()方法；而其的返回值，就是next()方法的返回值对象:

const iterator = new Array(1, 2, 3, 4)[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: 4, done: false}
console.log(iterator.next()) //{value: undefined, done: true}

可以看到，当我执行第四次的时候，也就是对应着arr[3]，但此时返回的对象中，done属性依旧是false，而执行第五次时，value变成了undefined，done变成了true，为什么会出现这种情况呢

在解答这个问题之前，我们需要在重新认识一下迭代器：

本质上来说，迭代器对象就是实现了next()方法的对象

const myIterator = {
  next() {
    if (length) {
      return { value: 1, done: false }
    } else {
      return { value: undefined, done: true }
    }
  },
}

如上述，就是一个最简单的迭代器。调用next()，会执行迭代，返回done为false的迭代器生成对象，直到符合某种条件，返回done为true的迭代器生成对象。

你可以简单的把Array迭代器原理看作如下所示：

const myIterator = {
  next() {
    if (length) {
      return { value: 1, done: false }
    } else {
      return { value: undefined, done: true }
    }
  },
}

输出的结果也是一样的：

const iterator = new MyArray(1, 2, 3, 4)[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: 4, done: false}
console.log(iterator.next()) //{value: undefined, done: true}

那么，之前的问题就迎刃而解了。

或许你已经发现了，我自定义了一个类MyArray，并且我手动改写了他的迭代器接口。那么是否只要为某个不可迭代的对象，实现了[Symbol.iterator]，就可以把它变成一个可迭代对象呢？

答案是肯定的。只要你想，你可以为任何对象加上可迭代协议，并把它变成可迭代对象。因为迭代对象的定义便是：实现迭代接口的对象。

2，自定义迭代接口

按照以上思路，我们就可以自己手动实现一个可迭代的Object对象了：

const prototype = {
  [Symbol.iterator]() {
    const entries = Object.entries(this)
    const { length } = entries
    let index = 0
    return {
      next() {
        return index < length
          ? {
              value: {
                key: entries[index][0],
                value: entries[index++][1],
              },
              done: false,
            }
          : { value: undefined, done: true }
      },
    }
  },
}

const obj = Object.create(prototype)
obj.name = 'zhang san'
obj.age = 28

const objIterator = obj[Symbol.iterator]()
console.log(objIterator.next()) //{value: {key:'name',value:'zhang san'}, done: false}
console.log(objIterator.next()) //{value: {key:'age',value:28}, done: false}
console.log(objIterator.next()) //{value: undefined, done: true}

首先，我们声明了一个改写了迭代接口的对象，接着用Obejct.create()创建了以此对象为原型的obj。

该对象实例本身是没有迭代接口的，但是会沿着原型链去寻找prototype对象是否存在迭代接口。只要能在其原型链上找到迭代接口，那么就代表其是一个可迭代对象。如：

const objSon = Object.create(obj, {
  name: {
    enumerable: true,
    writable: true,
    value: 'zhang xiao san',
  },
  age: {
    enumerable: true,
    writable: false,
    value: 2,
  },
  secret: {
    enumerable: false,
    writable: true,
    value: 'secret',
  },
})
const sonIterator = objSon[Symbol.iterator]()

console.log(sonIterator.next()) //{value: {key:'name',value:'zhang xiao san'}, done: false}
console.log(sonIterator.next()) //{value: {key:'age',value:2}, done: false}
console.log(sonIterator.next()) //{value: undefined, done: true}

objSon依旧是一个可迭代对象。

那么现在，我们就通过改造迭代接口[Symbol.iterator]的方式，把一个原本不是迭代类型的对象，变成了可迭代对象。

我们可以用该迭代接口来遍历任何enumerable的属性。但如果你想将enumrable为false的secret属性也遍历出来，那么只需要将迭代接口中的entries改造一下即可，一切皆由你想：

// const entries = Object.entries(this)

    const ownKeys = Object.getOwnPropertyNames(this)
    const entries = ownKeys.reduce(
      (result, key) => [...result, [key, this[key]]],
      []
    )

3，原生语言的迭代

以for - of 为例

for (const item of obj) {
  console.log(item)
}
//{key:'name',value:'zhang san'}
//{key:'age',value:28}

for (const item of objSon) {
  console.log(item)
}
//{key:'name',value:'zhang xiao san'}
//{key:'age',value:2}

可以看到，无论是obj，还是objSon，都可以正常用for of 循环，并且返回值为迭代器生成对象value属性的值。

你可以这么理解for - of 的机制：后台调用提供的可迭代对象的工厂函数[Symbol.iterator]，从而创建一个迭代器，然后自动调用迭代器next执行。done为false，则将迭代器生成对象value赋值给item；done为true，则跳出循环：

const objIterator = obj[Symbol.iterator]()
{
  const { value: item,done } = objIterator.next()
  if(done) break
  console.log(item) //{key:'name',value:'zhang san'}
}
{
  const { value: item,done } = objIterator.next()
  if(done) break
  console.log(item) //{key:'age',value:28}
}
{
  const { value: item,done } = objIterator.next()
  if(done) break
  console.log(item)
}

不仅仅是for - of，原生语言的迭代机制，都与此类似。数组解构，拓展操作符，Array.from，new Set()，new Map()，Promise.all()，Promise.race()，yield * 操作符等，都属于原生迭代语言。

了解了for - of 循环的机制之后，大家可以观察一下下面的例子：

const arr = [1, 2, 3, 4, 5, 6, 7, 8]
for (const item of arr) {
  console.log(item)
  if (item > 3) break
}
for (const item of arr) {
  console.log(item)
}
//输出结果：1，2，3，4 | 1，2，3，4，5，6，7，8

const arrIterator = arr[Symbol.iterator]()
for (const item of arrIterator) {
  console.log(item)
  if (item > 3) break
}
for (const item of arrIterator) {
  console.log(item)
}
//输出结果：1，2，3，4 | 5，6，7，8

循环arr的输出结果与循环arr迭代器arrIterator的结果明显的不同。为什么会出现这种现象呢？

在迭代器对象中，还有一个很重要的知识点：迭代器对象是一个一次性的，不可逆的对象。

因此，在迭代中某个地方终止，那么只能接着上一次终止的位置继续执行，而不会从头开始。

那么为什么对于arr本身使用for - of，却没有接着执行而是从头开始呢？可以回到介绍for - of 循环机制的那部分，其中有一句话：后台调用提供的可迭代对象的工厂函数[Symbol.iterator]，从而创建一个迭代器。

也就是说，每调用一次for - of循环，都会创建一个新的迭代器对象，而该迭代器对象，在循环结束时就会被当作垃圾对象被回收。

虽然arr连续调用了两次for - of循环，但是在循环体的内部，并不是同一个迭代器对象。因此，即使上一个迭代器在item>3这个条件处中止了，但是下一次循环的迭代器对象，是一个全新的，还没有执行过的迭代器对象。

那么对于调用arr[Symbol.iterator]接口生成的的迭代器对象arrIterator，为什么会出现继续上次执行的情况呢，换句话说，为什么arrIterator的两次for循环，没有产生两次迭代器对象？

其实，迭代器对象本身，也实现了迭代器接口，也就是说。arr有一个迭代器接口[Symbol.iterator]，而迭代器对象arrIterator也有一个迭代器接口[Symbol.iterator]，并且，调用该迭代器对象，返回其本身：

console.log(arrIterator[Symbol.iterator]() === arrIterator) // true

所以虽然每次执行for-of循环都会同样的调用迭代器接口，但是该迭代器接口返回的对象就是arr的迭代器对象本身，而迭代器对象是一个一次性，不可逆的对象。因此，为什么会出现上述现象，也就显而易见了。

细心的朋友可能会想到一个问题：我们在之前手动实现的可迭代对象，其迭代器对象是否支持了迭代接口？是的，他不能。

for (const item of objIterator) {
  console.log(item)
}
//Uncaught TypeError: objIterator is not iterable

但其实我们要优化也很简单，只要将该迭代器对象也实现一个迭代接口，并且该迭代接口工厂函数返回其本身，即可。

const prototype = {
  [Symbol.iterator]() {
    // const entries = Object.entries(this)

    const ownKeys = Object.getOwnPropertyNames(this)
    const entries = ownKeys.reduce(
      (result, key) => [...result, [key, this[key]]],
      []
    )
    const { length } = entries
    let index = 0
    return {
      next() {
        return index < length
          ? {
              value: {
                key: entries[index][0],
                value: entries[index++][1],
              },
              done: false,
            }
          : { value: undefined, done: true }
      },
      [Symbol.iterator]() {
        return this
      },
    }
  },
}

const objIterator = obj[Symbol.iterator]()

for (const item of objIterator) {
  console.log(item)
  if (item.key === 'name') break
}
for (const item of objIterator) {
  console.log(item)
}
// {key: 'name', value: 'zhang san'}
// {key: 'age', value: 28}

现在，你可以用文中所介绍的方法，将任何对象变成一个可迭代对象。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!