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

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

面试题内容

获得报错信息

通过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 表示还有更多元素可以迭代。)}
相关推荐
codingandsleeping2 分钟前
一个简易版无缝轮播图的实现思路
前端·javascript·css
天天扭码5 分钟前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
全宝31 分钟前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪1 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴1 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉1 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
风清扬雨2 小时前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js
海盗强2 小时前
Vue 3 常见的通信方式
javascript·vue.js·ecmascript
大熊猫今天吃什么2 小时前
【一天一坑】空数组,使用 allMatch 默认返回true
前端·数据库
!win !3 小时前
Tailwind CSS一些你需要记住的原子类
前端·tailwindcss