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

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

面试题内容

获得报错信息

通过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 表示还有更多元素可以迭代。)}
相关推荐
风骏时光牛马7 小时前
AI_Coding:智能代码创作引擎
前端
FungLeo7 小时前
成为全栈·Vue管理后台篇·<scriptsetup>:把页面拆成可读、可测的 Vue 组件
前端·javascript·vue.js·typescript·前端组件化·composition api·vue sfc
卸任18 小时前
Vibe coding工具使用心得
前端·ai编程
brien919 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance19 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M20 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写20 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李20 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易20 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
清晨Coding20 小时前
删了 Cookie 还能自动登录?Google系网站登录态自动恢复的原理分析
javascript