文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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}

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

总结

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯