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

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

面试题内容

获得报错信息

通过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 表示还有更多元素可以迭代。)}
相关推荐
前进的搬砖er10 分钟前
4.three.js的几何体、纹理、光源、材质、uv属性 讲义
前端
前端毕业班24 分钟前
uni-app 小程序支持 teleport 了
前端·javascript·vue.js
东风破_1 小时前
LLM 为什么记不住你?无状态、messages 和上下文管理
javascript·人工智能
梨子同志1 小时前
qiankun
前端
梨子同志1 小时前
Nginx
前端
梨子同志1 小时前
NestJS
前端
梨子同志1 小时前
Next.js
前端
谭光志2 小时前
工具塞满上下文窗口怎么办?深度拆解 AI Agent Tool Search 按需加载实现原理
前端·后端·ai编程
Hilaku2 小时前
前端架构师的克制:什么时候该坚决对新技术说不?
前端·javascript·程序员
陈随易2 小时前
前端项目部署只要30秒
前端·后端·程序员