记一道前端高难度面试题

news/2024/5/19 19:14:34/文章来源:https://blog.csdn.net/wanghaoyingand/article/details/127874970

目录

提问:如何让下面的这行代码成立

1.错误原因

2.思路

3.解题

4.小结


提问:如何让下面的这行代码成立

var [a,b] = {a:1,b:2}

 

直接运行会报错,报错信息如下:

Uncaught TypeError: {(intermediate value)(intermediate value)} is not iterableat <anonymous>

以下是答案:

1.错误原因

根据报错信息得知,是因为{a:1,b:2}不是可迭代的。

es6里面有一个可迭代协议,大体意思是,只要一个对象有一个属性【symbol.iterator】且它是一个函数,且返回一个迭代器,那么这个对象即可迭代。

还有一个点就是,解构赋值左边会得到右边的迭代器,不要求右边一定是数组,只要是可迭代对象即可


 

2.思路

常见的可迭代对象就是数组,是因为数组里面有一个迭代器 ,你可以在通过console.log打印看到数组的prototype属性上面的迭代器,如下图所示:

那么,我们只需照虎画猫给上面那个{a:1,b:2}加一个迭代器即可完成


 

3.解题

// 给对象原型上加一个属性【symbol.iterator】,让它等于一个函数,且这个函数返回一个迭代器,其实就是按照es6的可迭代协议进行操作Object.prototype[Symbol.iterator] = function(){return Object.values(this)[Symbol.iterator]() //调用数组的迭代器}

 

 4.小结

我们捋一捋刚才过程,首先,我们是先看到控制台报错,说迭代器的问题,我们自然地想到es6的可迭代协议,然后立马想到数组就是一个经典的可迭代对象,打印数组后,发现数组的原型上有可迭代属性,我们的思路也就确定了,给题目中的对象的原型上加一个迭代器。希望我的思路能够对各位有所帮助。

其实如果各位经常刷一些前端面试题的会发现,通常一种方法能解决一类问题,比如本文出现的往原型上加方法。

由此延伸出来的问题也来了,那就是前端安全。

前端安全方面一个非常重要的问题——原型注入,通过原型注入,可以轻易的破坏闭包,破坏第三方库,如elementUI,antd等,这个问题下一篇文章将于近期发布,欢迎评论区交流~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_224097.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

轻松学会jQuery选择器的用法

文章目录⛳️ 选择器✨ 属性选择器✨ 包含选择器✨ 位置选择器✨ 过滤选择器✨ 反向选择器⛳️ 快速投票⛳️ 选择器 本篇重点讲解jQuery中丰富的选择器&#xff0c;以及他们的基本用法。CSS的选择器均可以用jQuery的$进行选择&#xff0c;部分浏览器对CSS3的选择器支持不全&am…

【Pytorch with fastai】第 6 章 :其他计算机视觉问题

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

都说测试行业饱和了,为什么我们公司给初级测试开到了12K?

故事起因&#xff1a; 最近我有个刚毕业的学生问我说&#xff1a;我感觉现在测试行业已经饱和了&#xff0c;也不是说饱和了&#xff0c;是初级的测试根本就没有公司要&#xff0c;哪怕你不要工资也没公司要你&#xff0c;测试刚学出来&#xff0c;没有任何的项目经验和工作经验…

MaxViT: Multi-Axis Vision Transformer

论文&#xff1a;https://arxiv.org/abs/2204.01697 代码地址&#xff1a;https://github.com/google-research/maxvit 在本文中&#xff0c;介绍了一种高效且可扩展的注意力模型&#xff0c;称之为多轴注意力&#xff0c;该模型由两个方面组成&#xff1a;分块的局部注意力和…

笔记本电脑没有声音如何解决

​笔记本电脑没有声音的现象&#xff0c;也是笔记本电脑的常见运用病况之一,遇到这种情况的话,大家是否知道如何处理呢?下面小编来跟大家说说笔记本电脑没有声音解决方法&#xff0c;希望可以帮助到大家。 工具/原料&#xff1a; 系统版本&#xff1a;windows10系统 品牌型…

Allegro 274X格式gerber输出全流程详细介绍

Allegro 274X格式gerber输出全流程详细介绍 下面介绍Allegro gerber输出的全流程介绍 首先把光绘设置好 设置光钻孔精度 会出现对话框,勾选Enhanced Excellon format,点击close 输出钻孔文件,选择Auto Tool select,点击Drill 输出椭圆孔文件,默认设置,然后点击rout…

Android App开发之利用Glide实现图片的三级缓存Cache讲解及实战(附源码 超详细必看 简单易懂)

需要图片集和源码请点赞关注收藏后评论区留言~~~ 一、利用Glide实现图片的三级缓存 图片加载框架之所以高效&#xff0c;是因为它不但封装了访问网络的步骤&#xff0c;而且引入了三级缓存的机制。具体来说&#xff0c;是先到内存中查找图片&#xff0c;找到了就直接显示内存图…

二级导航栏

简介&#xff1a;本文通过HTML与CSS相集合的方式&#xff0c;来实现二级导航菜单。 HTML构建骨架 <body><ul class"nav1"><li>水果<ul class"nav2"><li>苹果</li><li>香梨</li><li>火龙果</li…

windows常见的命令操作大全

目录 一、目录文件操作 cd命令 dir命令 md命令 rd命令 move命令 copy命令 del命令 二、文本相关操作 type命令 >命令 findstr命令 |命令 三、网络相关操作 小建议&#xff1a;跟着文章亲手敲一遍是避免忘记的有效方法 一、目录文件操作 cd命令 功能&#xf…

JavaScript流程控制-循环(循环(for 循环,双重 for 循环,while 循环,do while 循环,continue break))

目录 JavaScript流程控制-循环 循环 for 循环 执行过程&#xff1a; 断点调试&#xff1a; 案例一&#xff1a;求1-100之间所有整数的累加和 案例二&#xff1a;求1-100之间所有数的平均值 案例三&#xff1a;求1-100之间所有偶数和奇数的和 案例四&#xff1a;求1-10…

HashMap的面试题

目录 1、底层数据结构 1.7和1.8有何不同 2、为什么用红黑树&#xff0c;为何不一上来就树化&#xff0c;树化阈值为何是8&#xff0c;何时会树化&#xff0c;何时会退化为链表 3、索引如何计算&#xff1f;hashCode都有了&#xff0c;为何还要提供hash()方法&#xff1f;数组…

ArcGIS计算地形湿度指数

TWI是区域地形对径流流向和蓄积影响的物理指标&#xff0c;有助于识别降雨径流模式、潜在土壤含水量增加区域和积水区域。 计算方法&#xff1a;TWI是通过细尺度地形与上梯度对地表面积的贡献相互作用&#xff0c;根据以下关系得到的(Beven et al.,1979) [1] : TWI ln [CA/…

用专业团队管理软件工具轻松“拿捏”年轻运营团队

本文旨在抛砖引玉&#xff0c;欢迎大家拍砖讨论&#xff0c;通过一款时下流行的专业团队管理软件飞项做案例&#xff0c;一起探讨和交流团队管理专业工具软件和一些对应的方法论。 说到国内这几年流行起来的团队管理工具软件&#xff0c;我们先看看互联网这几年的发展。这几年&…

京东面试题:ElasticSearch 深度分页解决方案

前言 Elasticsearch 是一个实时的分布式搜索与分析引擎&#xff0c;在使用过程中&#xff0c;有一些典型的使用场景&#xff0c;比如分页、遍历等。 在使用关系型数据库中&#xff0c;我们被告知要注意甚至被明确禁止使用深度分页&#xff0c;同理&#xff0c;在 Elasticsearc…

【Python实战】听书就用它了:海量资源随便听,内含几w书源,绝对精品哦~(好消息好消息)

前言 有温度 有深度 有广度 就等你来关注哦~ 所有文章完整的素材源码都在&#x1f447;&#x1f447; 粉丝白嫖源码福利&#xff0c;请移步至CSDN社区或文末公众hao即可免费。 哈喽&#xff01;我是栗子同学&#xff0c;继续更新——今天聊一聊“西马拉雅”。&#xff08;谐音…

特征选择-sklearn

sklearn特征选择:移除低方差特征&#xff1a;单变量特征选择递归特征消除基于模型的SelectFromModel顺序特征选择特征选择作为pipline的一部分sklearn.feature_selection模块中的类可用于样本集的特征选择/降维&#xff0c;以提高估计器的准确性得分或提高其在非常高维的数据集…

BL200OPC UA分布式IO系统接线方式

BL200OPC UA 数据点 Node Id OPC UA 的 Node Id 默认是 NS1&#xff1b;SI/O 数据点的 Modbus 映射地址(如首个 DO 模 块第一路 DO&#xff1a;NS1&#xff1b;S1000)&#xff0c;具体 Modbus 映射地址参考 5.1.4Modbus 寄存器映射&#xff0c; 如果是自定义的 OPC UA 模型 Nod…

(02)Cartographer源码无死角解析-(19) SensorBridge→雷达点云数据预处理(函数重载)

本人讲解关于slam一系列文章汇总链接:史上最全slam从零开始&#xff0c;针对于本栏目讲解(02)Cartographer源码无死角解析-链接如下: (02)Cartographer源码无死角解析- (00)目录_最新无死角讲解&#xff1a;https://blog.csdn.net/weixin_43013761/article/details/127350885 …

3.35 OrCAD中怎么产生Cadence Allegro的第一方网表?OrCAD软件输出Cadence Allegro第一方网表报错时应该怎么处理?

笔者电子信息专业硕士毕业&#xff0c;获得过多次电子设计大赛、大学生智能车、数学建模国奖&#xff0c;现就职于南京某半导体芯片公司&#xff0c;从事硬件研发&#xff0c;电路设计研究。对于学电子的小伙伴&#xff0c;深知入门的不易&#xff0c;特开次博客交流分享经验&a…

cpu与指令集

讨论一下 作为一个java程序员&#xff0c;我们都知道&#xff0c;当我们写完代码&#xff0c;java文件会被编译为class文件&#xff0c;然后交给jvm去执行&#xff0c;那么这个执行过程是啥样的呢&#xff1f;&#xff1f; 一般我们得到的解答都是&#xff0c;class代码会被解…