JS中数组遍历切忌 for in

最新推荐文章于 2024-04-08 21:24:36 发布

原创最新推荐文章于 2024-04-08 21:24:36 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #prototype #ViewUI

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文通过一个简单的JavaScript代码示例展示了如何进行原型污染，并解释了这种现象可能导致的安全问题。代码中修改了Array原型来添加一个非标准属性，这可能会影响所有使用Array的对象。

Array.prototype.test = 'test_prototype';

var arr = [1,2,3,4,5,6];

for (var i in arr){
    console.log(i);
}

>>0
>>1
>>2
>>3
>>4
>>5
>>test

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_1617

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

深入Vite核心编译能力

xiangzhihong8的专栏

07-13

538

我们知道，Vite 在开发阶段实现了一个按需加载的服务器，每一个文件请求进来都会经历一系列的编译流程，然后 Vite 会将编译结果响应给浏览器。而在生产环境下，Vite 同样会执行一系列编译过程，将编译结果交给 Rollup 进行模块打包。这一系列的编译过程指的就是 Vite 的插件工作流水线(Pipeline)，那它是如何实现的呢？

java面试汇总

悦分享

03-12

1596

java面试汇总基础篇 1、一个".java"源文件中是否可以包括多个类（不是内部类）？有什么限制？　　可以有多个类，但只能有一个public的类，并且public的类名必须与文件名相一致。 2、Java有没有goto? 　　java中的保留字，现在没有在java中使用。 3、说说&和&&的区别。　　&和&&都可以用作逻辑与...

参与评论您还未登录，请先登录后发表或查看评论

js数组遍历千万不要使用for...in...

ForeverNull的专栏

07-30

5126

js数组遍历有很多方法，比如for循环

为什么不让你使用for-in去遍历数组

weixin_30477797的博客

11-27

338

Array.prototype.eee = 'eee' var arr = ['aaa','bbb','ccc','ddd'] console.log(arr) for (var i in arr){ console.log(arr[i]) } // 99758@zsh MINGW64 ~/Desktop // $ node test.js // [ 'aaa', 'bb...

js中for in输出数组中属性名和属性值

songxueyan214的专栏

10-17

5032

var person = { name:"suesunna", age:22, love:"coding" }; for(var i in person){ document.write("this person's "+i+" is "+person[i] +""); }

for(var key in data）循环遍历函数

bigboy1010的博客

05-27

6068

for in 循环中key在对象和数组代表的值不一样，对象中即为对象名，数组中即为下标index；举例如下： 1.获取对象中的键（key）与值（value）： var data = {name:'小花',age:'17岁',sex:'男'}; for (var a in data) { console.log(a); /*属性名*/ console.log(data[a]); /*属性值*/ }; 2.获取数组中的值var a =...

Vue2 —— 学习（三）

qq_63342197的博客

04-08

1080

适用于样式的类名不确定需要动态指定通过指令绑定的形式，在模板中的类标签绑定 Vue 实例中的数据 mood在实例对象的 data 加入 mood 属性并且用对应的类名赋值data: {name: '一个人',},根据以上原理我们能设计出一个点击切换样式的效果点击切换成 happy 类名中的样式适用于绑定的样式个数不确定，名字也不确定想要随时添加样式删除样式就在模板中插值一个数组类型的数据。

把JavaScript标准库之数组一网打尽

weixin_34198453的博客

01-04

159

学习任何编程语言，数组都是绕不过去的坎，每个编程语言都在其标准库里面内置了功能强大的Array对象。通过参考阮一峰教程和MDN,我把数组常见的方法以及一些误区总结如下，内容较多，而且会继续补充，希望这一篇文章可以把数组的知识一网打尽。 1. 数组的简单概念 1.1 数组是什么呢？编程总要和数据打交道，常见的普通的数据由基本数据类型可以定义，一些具有多重属性、内容的数据就需要复杂的数据类型去定...

vue 判断同一数组内的值是否一直_解析vue-lazyload的设计思想

weixin_39972777的博客

11-13

171

之前业务中碰到了一个需求，这个需求如果完全硬编码在程序中的话，可以实现需求，但是复用性基本等于零，而且与业务代码混在一起，如果以后需求变好了非常不好修改。仔细思考过解耦性和优雅性之后，发现可以借鉴一下之前使用过的vue-lazyload的设计思路，此文章即解析一下vue-lazyload的简要设计思路。vue-lazyload解决了什么问题？可以想象一个网页打开有成百上千的图片需要加载，页面会变得...

最全面、最详细web前端面试题及答案总结

热门推荐

HanXiaoXi_yeal的博客

02-01

3万+

2021最全面、最详细web前端面试题及答案总结总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript

JAVA基础（完结版）

幻城砂的博客

02-17

806

JAVA基础 2020年11月27日 21:01 1 预科 a. 什么是计算机能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。由硬件常见的形式有台式计算机、笔记本计算机、大型计算机等。和软件所组成广泛应用在︰科学计算，数据处理，自动控制，计算机辅助设计，人工智能，网络等领域 b. 硬件及冯诺依曼结构（CPU 内存，主板） c . 计算机软件 1. 系统软件：DOS(Disk Operating System)Windows,Linux,Unix,Andro

前端如何准备数据结构和算法

学习、分享

08-31

2360

一、导读据我了解，前端程序员有相当一部分对“数据结构”和“算法”的基础概念都不是很清晰，这直接导致很多人在看到有关这部分的内容就会望而却步。实际上，当你了解了“数据结构”和“算法”存在的真正意义，以及一些实际的应用场景，对它有了一个整体的认知之后，你可能会对它产生强烈的兴趣。当然，它带将带给你的收益也是相当可观的。很多前端同学在看到“数据结构”和“算法”后会有一定的抵触心理，或者尝试去练习，...

js中数组遍历for与for in区别(强烈建议不要使用for in遍历数组)

weixin_34205076的博客

01-06

1361

为什么80%的码农都做不了架构师？>>> ...

用for循环数组去重

weixin_30673611的博客

05-07

2398

基于GEC6818平台的五子棋人机对战系统设计与实现

11-25

五子棋作为一种广为人知的策略性棋盘游戏，其基本规则易于掌握。在选定人机对战模式后，由程序执黑先行，用户执白应对。双方依次在棋盘上落子，任何一方在横向、纵向或斜向形成连续五个或更多同色棋子即获胜。项目资源涵盖多个技术领域的程序代码，涉及前后端开发、移动终端应用、操作系统、智能系统、物联网技术、信息管理系统、数据存储方案、硬件设计、大数据处理、教学资料、多媒体处理及网站构建等多个方向。具体技术实例包括嵌入式平台如STM32与ESP8266，编程语言如PHP、QT、C++、Java、Python、C#，系统开发如Linux与iOS，以及电子设计自动化工具和实时操作系统等。主要技术栈包含服务端开发语言Java、Python及Node.js，后端框架Spring Boot与Django，前端技术React、Angular与Vue，界面设计框架Bootstrap与Material-UI，数据库系统MySQL、PostgreSQL和MongoDB，缓存工具Redis，以及容器化部署方案Docker与Kubernetes。资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！

lv_0_20251125195629.mp4

11-25

lv_0_20251125195629.mp4

numpy、pandas、sklearn、pytorch等数据分析工具的一些使用技巧

11-25

NumPy数组操作实战技巧 numpy、pandas、sklearn、pytorch等数据分析工具的一些使用技巧

中国Cassandra数据库用户组开源社区项目-专注于Apache-Cassandra分布式NoSQL数据库技术研究与实践-提供技术文档下载与源码解析-集成Titan图数据库与Lu.zip

最新发布

11-25

Buffer内存管理实战技巧中国Cassandra数据库用户组开源社区项目_专注于Apache_Cassandra分布式NoSQL数据库技术研究与实践_提供技术文档下载与源码解析_集成Titan图数据库与Lu.zip中国Cassandra数据库用户组开源社区项目_专注于Apache_Cassandra分布式NoSQL数据库技术研究与实践_提供技术文档下载与源码解析_集成Titan图数据库与Lu.zip

数组遍历for和for in的区别

08-27

<think>首先，用户的问题是：“我想理解数组遍历中for循环和for...in循环的区别请问JavaScript数组遍历 for循环和for in循环的区别”。我需要基于提供的引用和系统指令来回答。系统指令要求： - 所有行内数学表达式使用$...$格式。 - 独立公式使用$$...$$格式并单独成段。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，例如[^1]。 - 回答结构清晰，帮助用户逐步解决问题，尽量保证回答真实可靠。参考引用： - 引用[1]：讨论了for循环、for-in遍历对象、forEach遍历数组。 - 引用[2]：介绍for循环遍历数组。 - 引用[3]：讨论使用for循环遍历数组。 - 引用[4]：提到forEach和for...of用于遍历数组。 - 引用[5]：解释了为什么不推荐用for-in遍历数组，并推荐了for...of、forEach和传统for循环。用户的问题是关于JavaScript数组遍历中for循环和for...in循环的区别。我需要从引用中提取相关信息。关键点： - for循环：是传统的循环方式，用于遍历数组元素通过索引。例如，`for (var i = 0; i < arr.length; i++) { ... }`。 - for...in循环：用于遍历对象的属性，但也可以用于数组。然而，它不推荐用于数组遍历，因为它会遍历所有可枚举属性，包括原型链上的属性，这可能导致意外行为。从引用[5]：它明确指出为什么不推荐使用for...in遍历数组，并推荐了其他方法如for...of、forEach和传统for循环。区别总结： 1. **用途**： - for循环：专门用于基于索引的遍历，适合数组。 - for...in：用于遍历对象的可枚举属性，包括数组索引，但会遍历所有属性。 2. **行为**： - for循环：直接访问数组元素通过索引，顺序是确定的（0到length-1）。 - for...in：遍历所有可枚举属性，包括非数字属性和原型链上的属性，顺序不保证（在JavaScript中，数组索引的顺序是数字顺序，但for...in可能以任意顺序遍历属性）。 3. **问题**： - for...in在数组遍历时可能包括继承的属性或方法，导致错误。例如，如果数组有自定义属性，它会被遍历出来。 - for循环只遍历数字索引，更安全。 4. **性能**：通常，for循环更快，因为它是直接的索引访问。 5. **推荐**：引用[5]强调，不推荐使用for...in遍历数组，而应使用for...of、forEach或传统for循环。我的回答结构： - **引言**：简要介绍问题。 - **逐步解释**： 1. 解释for循环在数组遍历中的应用。 2. 解释for...in循环及其在数组遍历中的问题。 3. 对比两者的区别。 4. 提供推荐。 - **生成相关问题**：在末尾添加相关问题。 - **引用**：在适当的地方添加引用标识。使用中文回答。确保LaTeX语法正确：用户的问题不涉及数学，但如果有数学表达式，需要用$...$或$$...$$。这里可能不需要，但保持警惕。生成相关问题：基于主题，如其他遍历方法、优化等。最终回答框架： 1. **开头**：直接回答问题。 2. **主体**： - 描述for循环。 - 描述for...in循环。 - 对比区别。 - 引用支持。 3. **结尾**：总结推荐。 4. **相关问题**：添加相关问题。</think>### JavaScript数组遍历：for循环与for...in循环的区别在JavaScript中，数组遍历是常见的操作，但不同循环方法有显著差异。for循环和for...in循环虽然都用于遍历，但它们在用途、行为和适用场景上存在关键区别。以下我将逐步解释这些区别，确保回答清晰可靠。基于提供的引用资料，我会在相关段落末尾添加引用标识。 #### 1. **for循环在数组遍历中的应用** for循环是传统的基于索引的遍历方法，专门用于数组或类数组结构。它通过索引（从0开始到数组长度减1）逐个访问元素，顺序是确定的（即索引升序）。语法示例如下： ```javascript // 示例：for循环遍历数组 const arr = ['apple', 'banana', 'orange']; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); // 输出元素：apple, banana, orange } ``` - **优点**： - 顺序可控，严格按索引访问元素。 - 高性能，因为直接操作索引，适用于大型数组[^2]。 - 可访问索引（`i`），便于修改或条件控制。 - **缺点**：语法相对冗长，需要手动管理索引边界。 for循环是遍历数组的推荐方法之一，尤其在需要精确控制迭代过程时[^3][^5]。 #### 2. **for...in循环在数组遍历中的问题** for...in循环设计用于遍历对象的可枚举属性（如键值对），而非专门针对数组。它可以用于数组，但会遍历所有可枚举属性，包括数组索引、自定义属性甚至原型链上的属性。语法示例如下： ```javascript // 示例：for...in遍历数组（不推荐） const arr = ['apple', 'banana', 'orange']; arr.customProp = 'test'; // 添加自定义属性 for (let key in arr) { console.log(key + ": " + arr[key]); // 可能输出：0: apple, 1: banana, 2: orange, customProp: test } ``` - **主要问题**： - **遍历非元素属性**：for...in会包括数组的非数字属性（如`customProp`）和原型链方法（如`toString`），导致意外输出[^1][^5]。 - **顺序不确定**：JavaScript规范不保证属性遍历的顺序，可能导致元素访问乱序（尽管现代引擎通常按索引顺序，但非绝对可靠）。 - **性能较低**：由于检查所有属性，比for循环慢，尤其当数组有额外属性时。 - **为什么避免用于数组**：引用[5]强调，for...in在数组遍历中容易引入bug，因为它不是为数组设计的；相反，它更适合纯对象（如`{name: 'Alice', age: 30}`）[^5]。 #### 3. **关键区别对比** 下表总结了for循环和for...in循环的核心区别（基于引用资料）： | 特性 | for循环 | for...in循环 | |--------------------|--------------------------------|----------------------------------| | **设计用途** | 专门用于数组或类数组的索引遍历 | 用于对象的可枚举属性遍历 | | **遍历内容** | 仅数字索引元素（0到length-1） | 所有可枚举属性（包括索引、自定义属性和原型链属性） | | **顺序保证** | 是（索引升序） | 否（顺序不确定） | | **性能** | 高（直接索引访问） | 较低（需检查所有属性） | | **推荐场景** | 数组遍历、需要索引控制时 | 对象属性遍历，避免用于数组 | | **语法复杂度** | 中等（需手动管理索引） | 简单（但易出错） | - **实际影响**：如果错误使用for...in遍历数组，可能输出多余属性或遗漏元素。例如，在数组添加自定义属性后，for...in会将其包括在内，而for循环只处理元素[^5]。 - **替代推荐**：对于数组，优先使用for循环、for...of（ES6+）或forEach方法。这些方法更安全且语义清晰[^4][^5]。 #### 4. **总结与最佳实践** - **核心区别**：for循环是索引导向的，适合数组；for...in是属性导向的，适合对象。在数组遍历中，for...in易导致错误，应避免使用。 - **推荐方法**： - 使用for循环：当需要索引或高性能时。 - 使用for...of或forEach：当只需元素值且代码简洁时（例如`for (const item of arr) { ... }`）。 - 始终检查数组是否包含非数字属性，以防意外行为[^3][^5]。如果您有具体代码示例或场景，我可以进一步分析优化！