@value 数组_为什么不推荐用for...in遍历数组

e588e7d2865a7cef94d90d089ed3a810.png

(一)for...in引发的一个报错

两年前写的一个文章目录生成插件vue-outline,一直用着没出啥问题(本站的文章目录也是用该插件生成的)。但是最近一个网友在使用的时候却出现了异常报错,异常代码使用了一个for...in遍历数组:

for 

代码本意是,通过用户给定的选择器列表selectors确定哪些元素可以提取出来作为标题,比如传一个['h1', 'h3', 'div.title']。网友的使用方法完全正确,selectors传递的都是合法的选择器,但是会出现以下报错:

1f28293dbb7972e8f42136fce1c37b80.png

一个函数不是一个合法的选择器?selectors里传递的都是选择器。最后这位网友找到了原因,可能和for...in有关系,因为他在数组的原型上添加了一些便捷的方法:

6201b47fe22b30fda092b34e711d27c5.png

而for...in会遍历出原型上的这些方法,这就导致在执行前面的代码时,把一个函数作为参数传递给了querySelectorAll,导致报错!

(二)for...in细节

for...in本身是Object的遍历方法,JS中的数组也继承自Object,所以自然而然也能使用for...in遍历出属性。然而for...in有一些难以注意到的细节,稍不注意就可能被坑。

1. 细节一: 遍历的的属性值是字符串,而不是数字!(相信初接触JS的人都要被坑一次吧)

const 

打印:

0 

可以看到typeof i的返回值是“string”,这个最坑的地方在于我们通过下标加减想取别的元素时,就会出现异常,像上述输出的i + 1一样,并不是数字相加,而是字符串拼接!

2. 细节二:遍历的是对象的枚举属性,包括自身属性以及原型链上的属性

const 

输出:

a 

可以看到,原型上的属性c也打印出来了,但是通过Object.defineProperty定义的不可枚举属性d(enumerable: false)没有被遍历到。

3. 细节三:遍历顺序是对象属性的枚举顺序,并不一定按数组的下标顺序遍历

for...in的遍历顺序是枚举顺序,对于数组而言,规范并没有约束各浏览器的实现。因此即便在一定范围内是按顺序遍历的,也应该尽量不依赖for...in遍历的顺序。MDN文档也明确指出,不建议使用for...in遍历数组,特别是想按照索引顺序遍历的时候:

1d05d495992f0a885529ae1c451e24ac.png

此外,因为有稀疏数组的存在,其实JS里的数组不一定是顺序结构存储的。当数组的键分布较为稀疏,为了充分节约空间,数组可能会退化为像对象一样的哈希表存储结构。

因为for...in本身是对象的遍历方法,并不适用于数组,对于数组,还是for...of、for循环、forEach等遍历比较好。

作者:MuMa

链接:为什么不推荐用for...in遍历数组 - 沐码小站

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

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

相关文章

mysql 插入字符串_mysql插入数据字符错误

Incorrect string value: \xF0\x9F... for column XXX at row 1这个问题,原因是UTF-8编码有可能是两个、三个、四个字节。Emoji表情或者某些特殊字符是4个字节,而Mysql的utf8编码最多3个字节,所以数据插不进去。我的解决方案是这样的[mysqld]…

python启动方法_python进程开启的两种方式

一、进程 1.1、方式一 from multiprocessing import Process import time #方式一 def task(name): print(f"my name is {name},启动时间") time.sleep(2) print(f"my name is {name},停止时间") if __name__ __main__: # 1 创建一个对象 p Process(targ…

mysql存储函数 cursor_MySQL的存储过程写法和“Cursor”的使用

MySQL的存储过程写法和“Cursor”的使用2008-03-11eNet&Ciweek本文中介绍了一个MySQL的存储过程,其中涉及Cursor的使用,示例如下:CREATE PROCEDURE justifyGroupNum()NOT DETERMINISTICSQL SECURITY DEFINERCOMMENT BEGIN/*how to run:ca…

python网页开发好用吗_推荐用于Web开发的最好 Python 框架

Python 是一门动态、面向对象语言。其最初就是作为一门面向对象语言设计的,并且在后期又加入了一些更高级的特性。除了语言本身的设计目的之外,Python标准 库也是值得大家称赞的,Python甚至还自带服务器。其它方面,Python拥有足够…

mysql数据库字段变形_详解如何利用amoeba(变形虫)实现mysql数据库读写分离

摘要:这篇MySQL栏目下的“详解如何利用amoeba(变形虫)实现mysql数据库读写分离”,介绍的技术点是“MySQL数据库、数据库读写分离、amoeba、MySQL、读写分离、数据库”,希望对大家开发技术学习和问题解决有帮助。关于mysql的读写分离架构有很多…

python位运算符_NumPy按位运算符解析和实例详解

本文概述 Numpy提供以下按位运算符。 SN Operator Description 1 bitwise_and 它用于计算相应数组元素之间的按位运算。 2 bitwise_or 它用于计算相应数组元素之间的按位运算。 3 invert 它用于计算按位而不是数组元素的运算。 4 left_shift 它用于将元素的二进制表示形式的位向…

bind blz mysql_MySQ DBAL重点剖析课程 企业级MySQL系统安全与DBA运维日常事务管理 运维DBA必备宝典...

MySQ DBAL重点剖析课程 企业级MySQL系统安全与DBA运维日常事务管理 运维DBA必备宝典本资源由JAD资源网收集整理丨www.jiuandun.com资源简介MySQ DBAL重点剖析课程,课程的重点在于企业级MySQL系统安全实战,和MySQL DBA运维的日常事务管理,也就…

怎样解决外键约束_《设计心理学》|找寻“设计师”所遇的真正问题与解决之道...

《设计心理学1》作者[美] 唐纳德A诺曼 。此书始终强调以人为本的设计哲学,将认知心理学和行为学等多学科的方法导入到设计之中。不仅着重于反思设计过程中出现的问题给用户带来的困扰,更着重于解决问题,用这些基本原则帮助设计师找到真正的问…

java dumpheap_java程序性能分析之thread dump和heap dump

一.dump基本概念在故障定位(尤其是out of memory)和性能分析的时候,经常会用到一些文件来帮助我们排除代码问题。这些文件记录了JVM运行期间的内存占用、线程执行等情况,这就是我们常说的dump文件。常用的有heap dump和thread dump(也叫javacore&#xf…

python缩进格式错误的是_19个常见的python错误和异常

19个常见的python错误和异常 错误总是不可避免,尤其是在初学阶段,本文收集整理了1个常见的python错误 1. 忘记添加: 在if, elif, else, for, while, class,或者使用def定义函数的名称后面忘记添加:,就会引发 SyntaxError if 3 >…

json string 格式_GO小知识之如何做JSON美化

经常有些小知识想分享出来,但又构不成体系,一直觉得文章形式发出不太合适。准备以 "知乎想法" 分享出来,但发现代码展示不太友好。还是发文章吧,该类分享将以 "小知识" 为前缀。后端http接口测试常需要打印 J…

2019计算机二级java软件_2019年计算机二级Java考试冲刺题及答案(2)

1.下列数据结构中,属于非线性结构的是()。A.循环队列B.带链队列C.二叉树D.带链栈2.下列数据结构中,能够按照“先进后出”原则存取数据的是()。A.循环队列B.栈C.队列D.二叉树3.对于循环队列,下列叙述中正确的是()。A.队头指针是固定不变的B.队…

python导入模块有几种方式、各有什么特点_Python导入模块的几种姿势

作为一名新手Python程序员,你首先需要学习的内容之一就是如何导入模块或包。但是我注意到,那些许多年来不时使用Python的人并不是都知道Python的导入机制其实非常灵活。在本文中,我们将探讨以下话题: 常规导入(regular…

java 对象引用 弱引用吗_谈谈Java对象的强引用,软引用,弱引用,虚引用分别是什么...

整体结构java提供了4中引用类型,在垃圾回收的时候,都有自己的各自特点。为什么要区分这么多引用呢,其实这和Java的GC有密切关系。强引用(默认支持模式)把一个对象赋给一个引用变量,这个引用变量就是一个强引用。强引用是我们最常见…

python图像几何变换_Python 图像处理 OpenCV (5):图像的几何变换

前文传送门: 图像缩放 图像缩放只是调整图像的大小,为此, OpenCV 为我们提供了一个函数 cv.resize() ,原函数如下: resize(src, dsize, dstNone, fxNone, fyNone, interpolationNone) src 表示的是输入图像&#xff0c…

java中main方法返回类型是6_[单选] Java application中的主类需包含main方法,main方法的返回类型是什么()。...

[单选] Java application中的主类需包含main方法,main方法的返回类型是什么()。 更多相关问题 关于超声在人体中传播的速度,叙述正确的有A、与人体组织的弹性有关B、与人体组织的密度有关C、与人 患者女,50岁,2年前超声发现甲状腺右叶单发实性结节, 0.7 cm0.5 cm。先后数家…

linux中python编辑器_Linux下9款最好的Markdown编辑器

首先, Markdown是使用Perl编写的,简单、轻量级的工具,允许用户编写纯文本格式和高效的html或者XHTML。它实际上是一个易于阅读,易于编写纯文本的语言和文本到HTML的转换的软件工具。 希望你有一点了解,Mrakdown是什么&…

java监听数据库操作_第十六篇——JDBC操作数据库之监听器

JavaWeb应用中,很多的地方都和session有关。因此session相关的事件监听器,在日常工作中非常有用。有时候我们需要统计当前在线的人数和访问人数总数,此时就可以使用监听器技术来很简单的实现这种功能。注意:session并不是浏览器关…

pythonsuper函数_怎么使用python super函数调用父类

怎么使用python super函数调用父类 发布时间:2020-11-19 09:19:47 来源:亿速云 阅读:93 作者:小新 小编给大家分享一下怎么使用python super函数调用父类,希望大家阅读完这篇文章后大所收获,下面让我们一起…

java listview颜色_[摘]android listview选中某一行,成选中状态颜色高亮显示

构造自己的adapter,在getView中,设置颜色,点击item,刷新listview。代码:view plaincopy to clipboardprint?import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;impor…