揭秘!为何迭代器是解构的关键所在

大家好,最近学习到一个关于解构和迭代器的面试题,自己总结一下,分享给大家。总结解构的过程,了解迭代器。

面试题内容

获得报错信息

通过ai分析此类错误得到的结果:在 JavaScript 里,对象默认并非可迭代对象 。当你试图对一个对象使用数组解构赋值或者其他需要可迭代对象的操作时,就会抛出这个错误。(我们尝试把一个普通对象解构赋值给数组 [a, b]

了解可迭代对象

js中,可迭代对象是实现了Symbol.iterator 方法的对象。它可以允许我们使用像for..of循环这样的语法来遍历元素,使用这样的方法的时候就是在调用Symbol.iterator 方法来获取一个迭代器逐个访问对象的元素。

1. 从平时常写的解构赋值来分析

  1. 结果是成功的,那么我们看一下此时arr的内容(内容中确实是有Symbol.iterator 方法)

  1. 打印Symbol.iterator看看里面到底有什么

  1. Symbol.iterator中的next方法

通过上面调用next的方法我们可以看到,next依次的遍历了这个数组。而解构的本质也就是,把value值一个个赋给字段。例如:const a = item.next().value

那么,是否为可迭代对象,看这个对象中有没有symbol.iterator且为函数,iterator是有要求的,会return 一个迭代器,这里面有个原型方法next

面试题的解决方案

首先第一它不是一个迭代对象,需要让它变成迭代对象,那么我们就可以直接在object的原型链上进行操作加上Symbol.iterator

  1. 查看Object.prototype
  1. 原型链上加上Symbol.iterator,并return

总结

解构需要是可迭代对象,可迭代对象中有Symbol.iterator方法,该方法会return一个迭代器,这里面有个next方法。可迭代对象、Symbol.iterator 方法、迭代器以及 next 方法它们共同构成了 JavaScript 中迭代机制的核心

Symbol.iterator
Symbol.iterator 一个内置的 Symbol 值,是对象的一个属性键。主要作用是返回一个迭代器对象,用于控制对象元素的迭代过程。
迭代器 一个对象,它实现了 next 方法
next 方法 是迭代器对象的核心方法,它返回一个对象。{value:当前迭代的值 ,done:布尔值(true 表示迭代结束,false 表示还有更多元素可以迭代。)}
相关推荐
贾修行4 小时前
Kestrel:.NET 的高性能 Web 服务器探秘
服务器·前端·kestrel·.net·net core·web-server·asp.net-core
吃吃喝喝小朋友4 小时前
HTML DOM
前端·javascript·html
HWL56794 小时前
HTML中,<video> 和 <source> 标签
前端·javascript·html
球球不吃虾4 小时前
分享一个简单的交互式塔罗牌抽牌应用
前端·vue
2501_948120154 小时前
中职动漫设计与制作专业实训方案研究
前端·人工智能·语言模型·自然语言处理·架构
沛沛老爹4 小时前
从Web到AI:多模态Agent图像识别Skills开发实战——JavaScript+Python全栈图像处理方案
java·javascript·图像处理·人工智能·python·rag
小小鸟0084 小时前
前端 RBAC基于角色的权限控制(按钮级别)
前端
学习java的小库里4 小时前
EasyExcel复杂导出
java·前端
muddjsv4 小时前
前端开发通用全流程:从需求到上线,步步拆解
前端