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

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

面试题内容

获得报错信息

通过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 表示还有更多元素可以迭代。)}
相关推荐
w_y_fan5 分钟前
Flutter 滚动组件总结
前端·flutter
wuli金居哇7 分钟前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort9 分钟前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手11 分钟前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码12 分钟前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码13 分钟前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
南雨北斗14 分钟前
VS Code 中手动和直接运行TS代码
前端
小高00716 分钟前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴16 分钟前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong16 分钟前
JavaScript逆向之反制无限debugger陷阱
前端·javascript