JavaScript - myArray.forEach 与 for 循环的细微差别

2024-04-14

我看到很多建议使用的问题:

for (var i = 0; i < myArray.length; i++){ /* ... */ }

代替:

for (var i in myArray){ /* ... */ }

对于数组,由于迭代不一致(see here https://stackoverflow.com/questions/242841/javascript-for-in-vs-for).


但是,我似乎找不到任何似乎更喜欢面向对象循环的东西:

myArray.forEach(function(item, index){ /* ... */ });

这对我来说似乎更直观。

对于我当前的项目,IE8 兼容性很重要,我正在考虑使用Mozilla 的 polyfill https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Polyfill,但是我并不能 100% 确定这将如何工作。

  • 标准 for 循环(上面的第一个示例)和现代浏览器的 Array.prototype.forEach 实现之间有什么区别吗?
  • 现代浏览器实现和上面链接的 Mozilla 实现(特别是 IE8)之间有什么区别吗?
  • 性能并不是什么大问题,只是迭代属性的一致性才是问题。

两者之间最本质的区别for循环和forEach方法是,对于前者,你可以break跳出循环。你可以模拟continue通过简单地从传递给的函数返回forEach,但没有办法完全停止循环。

除此之外,两者有效地实现了相同的功能。由于变量提升,另一个细微差别涉及 for 循环中索引(以及所有包含变量)的范围。

// 'i' is scoped to the containing function
for (var i = 0; i < arr.length; i++) { ... }

// 'i' is scoped to the internal function
arr.forEach(function (el, i) { ... });

然而,我发现forEach更具表现力 - 它代表您迭代数组中每个元素的意图,并且它为您提供对元素的引用,而不仅仅是索引。总的来说,这主要取决于个人品味,但如果你可以使用forEach,我建议使用它。


这两个版本之间存在一些更实质性的差异,特别是在性能方面。事实上,简单的 for 循环的性能比forEach方法,如所证明的这个 jsperf 测试 http://jsperf.com/for-vs-foreach/66.

您是否需要这样的性能取决于您自己的决定,在大多数情况下,我更喜欢表现力而不是速度。这种速度差异可能是由于在稀疏数组上操作时基本循环和方法之间存在细微的语义差异,如这个答案 https://stackoverflow.com/a/18884620/465378.

如果你不需要以下行为forEach和/或者你需要尽早跳出循环,你可以使用 Lo-Dash 的_.each http://lodash.com/docs#forEach作为替代方案,它也可以跨浏览器工作。如果您使用 jQuery,它还提供了类似的$.each http://api.jquery.com/jquery.each/,只需注意每个变体中传递给回调函数的参数的差异即可。

(至于forEachpolyfill,如果您选择走这条路,它应该可以在旧版浏览器中正常工作。)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript - myArray.forEach 与 for 循环的细微差别 的相关文章

  • 将数组中的所有值作为参数传递给函数

    我有一个值数组 a b c d 我需要将它们作为参数传递给函数 window myFunction a b c d 如果我可以将数组 对象传递到函数中 那么这会更容易 但这些函数是由其他人编写的或已经存在 我无法更改它们 它们需要作为单独的
  • 为具有可变内容的内联块元素提供相同的高度?

    我有 4 个宽度固定但内容可变的内联块元素 并且我希望所有这些元素具有相同的高度 最大元素的高度 请参见这个jsfiddle http jsfiddle net kKZXj 我应该如何实现这个目标 如果仅使用 css 无法做到这一点 那么使
  • 了解执行模型和事件循环

    我读过很多关于JavaScript单线程执行模型 事件循环和事件队列的文章 但有一件事尚不清楚 我创建了一个小提琴来说明我的问题 http jsfiddle net yzpmf67f http jsfiddle net yzpmf67f
  • npm 脚本:node-sass 不监视部分 sass 文件

    我有这个项目结构 src assets css sass main scss variables scss 我正在尝试编写一个 npm 脚本 该脚本将监视我的所有 scss 文件 包括部分文件 中的更改 然后仅编译我的 main scss
  • Chart.js 没有显示在我的视图中

    我有一个使用 angular js 运行的应用程序 我的视图之一应该加载图表 我正在使用 Chart js 但由于某种原因它不起作用 并且我的控制台上没有显示错误 这是我创建图表的函数 scope writeBatteryChart fun
  • 嵌套对象的 AJV 模式验证

    函数返回的对象看起来像这样 answer vehicle type 1 message Car model VW color red 答案 对象始终存在 其他字段基于 vehicle type E g 如果vehicle type 1 则有
  • 如何滚动到 jQuery Mobile 中的页面元素?

    我有一个很长的 jQuery 移动页面 并且想在页面加载后滚动到该页面中间的元素 到目前为止 我已经尝试了一些事情 最成功的是 jQuery document bind mobileinit function var target if t
  • Backbone-relational 无法实例化两个 RelationalModel 对象

    我正在尝试实现 BackboneRelational 并不断获得 无法实例化多个 Backbone RelationalModel 每种类型都有相同的 ID class App Models User extends Backbone Re
  • 如何获取调用函数的“this”值?

    如果我有一个这样的函数 function foo this console log this function bar bar prototype func function foo this var test new bar test f
  • 使用JS将图像的特定背景颜色设置为透明

    我正在使用以下代码来修改图像的透明度 然而 我想做的只是修改图像的背景颜色并将其 alpha 通道设置为 0 而不是整个图像 以下代码将整个图像的 Alpha 透明度设置为 0 var ctx this data getContext 2d
  • C# datagridview 列转入数组

    我正在用 C 构建一个程序 并在其中包含一个 datagridview 组件 datagridview 有固定数量的列 2 我想将其保存到两个单独的数组中 但行数确实发生了变化 我怎么能这样做呢 假设一个名为 dataGridView1 的
  • 在 Chrome 中检索浏览器语言

    我一直在尝试让 momentjs 正确检测浏览器语言并本地化时间显示 按照使用 Moment js 进行区域设置检测 https stackoverflow com questions 25725882 locale detection w
  • 使用 test() 通过正则表达式进行信用卡验证

    我正在尝试完成一些作业 看来这本书可能做错了 我有一个简单的 html 页面 允许用户在我们的例子中选择信用卡 美国运通卡 然后 用户输入一个数字并根据正则表达式评估该数字 我的问题最终是当 test 计算它返回的数字时是布尔值还是字符串
  • JavaScript - 这个这个

    String prototype foo String prototype foo bar function How can you reference the grandparent string console log this par
  • 单击窗口后才检测到 keydown

    在我的 Web 应用程序中 我有一个用于打开菜单的键的事件侦听器 仅当我单击页面上的任意位置后 此功能才可以正常工作 我尝试将焦点添加到窗口加载 但这仍然不会让 keydown 函数运行 直到我单击页面上的某个位置之后 有谁知道这是否可能
  • CKEditor TypeError:c[a] 在 CodeIgniter 中未定义

    我正在尝试在基于 codeigniter 的网站中安装 CKEditor 并且我已按照本教程进行操作 Codeigniter 教程中的 CKEditor http nukium com developpement php framework
  • 可选链接在 create-react-app 中不起作用

    In a create react app项目 我正在使用 babel plugin proposal optional chaining在我的 babelrc中 但是 我有这个错误 Module parse failed Unexpect
  • JS中如何过滤多个字符串? [复制]

    这个问题在这里已经有答案了 我希望能够过滤数组中的多个字符串 类型 例如我想过滤类型meat并输入fruit在下面的数据结构中 我想要实现的是过滤数据对象 const data type meat food hamburger type f
  • 禁用 Materialise Carousel 上的触摸

    看起来以前没有人问过这个问题 因为我几乎在互联网上寻找一个非常简单的答案 如何禁用在物化轮播上向左 向右滑动的功能 在 Materialize js 添加 编辑 var allowCarouselDrag true value functi
  • addEventListener keydown 不起作用

    我在互联网上找到了一些基本的 Pong 代码 并尝试添加按键 代码在这里 http cssdeck com labs ping pong game tutorial with html5 canvas and sounds http css

随机推荐

  • PHP - htmlspecialchars 和 UTF-8

    我只是想确认一些事情html特殊字符 http php net manual en function htmlspecialchars php 我刚刚将数据库转换为 UTF 8 我想我终于可以正常工作了 但是在我的代码中我使用了PHP ht
  • 在 Go 中生成长随机字符串的最快方法是什么?

    像 a zA Z0 9 字符串 na1dopW129T0anN28udaZ 或十六进制字符串 8c6f78ac23b4a7b8c0182d 我所说的 长 是指 2K 及更多字符 我的盒子上的速度约为 200MBps 显然还有改进的空间 ty
  • 是否还能获取Skype用户的在线状态?

    正如标题所说 API 服务发生 重大 变化后 是否仍然可以在 Skype 上查看用户的状态 在线 离线 忙碌 开发者部分现在看起来非常非常有限 http developer skype com http developer skype co
  • 从类库项目中的 App.config 读取

    我正在开发一个简单的类库项目 这会给我一个 dll 我想从配置文件中读取特定值 所以我在我的项目中添加了一个 App config 文件
  • 为什么 Linux/gnu 链接器选择地址 0x400000?

    我正在 Linux x86 64 上试验 ELF 可执行文件和 gnu 工具链 我已经链接并剥离 手动 Hello World 测试 global start text start mov 1 rax 转换为 267 字节 ELF64 可执
  • “&”和 std::reference_wrapper 之间的区别?

    我有以下代码 include
  • 开放固件设备树概述/参考手册

    我正在尝试为嵌入式 PowerPC 板设置驱动程序 今天执行此操作的正确方法是使用 OpenFirmware 设备树数据结构 dtb 文件 从 dts 文件编译 创建树非常简单 但是如何让我的设备驱动程序找到它的节点和其中的数据 我还没有找
  • 在棒棒糖之前的设备工具栏上添加标高/阴影

    我将我的 Android 应用程序更新为新的材料设计 但我还想向工具栏添加一些阴影或高度 似乎有一些 hacky 方法可以通过 images 9 patches 来完成此操作 但我想知道是否可以通过支持库来完成 就像CardView可以有海
  • 如何使用 Moq 对不同参数设置两次方法

    我想用最小起订量设置一个方法两次 但似乎最后一个方法覆盖了前面的方法 这是我的初始设置 string username foo string password bar var principal new GenericPrincipal n
  • Redux 表单中 中的 className

    我创建了一个 redux form 我想将 className 添加到每个字段以使用 css 自定义它们 每个字段的代码是
  • Android Google 日历“无法启动活动”

    Case 1我主持了 iCal 日历活动 icsAmazon AWS 上的文件及其 HTTP URL 集成在我的 Android 应用程序中 这是文件 https s3 ap southeast 1 amazonaws com endcar
  • 使不同纵横比的响应图像具有相同的高度

    我正在尝试找出一种方法 使响应式图像行具有相同的高度 而不管每个图像的纵横比或容器的宽度如何 实际图像文件的高度相同 但宽度不同 问题是 当容器变小时 在某些宽度下 舍入误差会导致图像的高度相差一个或两个像素 这是一个小提琴http jsf
  • 如何向导航栏添加阴影而不是默认边框

    我想替换默认边框UINavigationBar与阴影 有什么办法可以实现这一点吗 我尝试使用与向 UIView 添加阴影相同的方法 但它增加了导航栏的高度 尝试这个 self navigationController navigationB
  • Angular2创建一个显示外部网页内容的组件

    我需要创建一个显示另一个网页内容的组件 例如 如果我有 stackoverflow 站点 我想创建一个组件来执行 http 请求并通过我的应用程序显示内容 顺便说一下 外部网站只是 django rest swagger 要访问它 我每次访
  • 在 Rails 应用程序中使用自定义函数

    我试图遵循以下关于在 Rails 中使用自定义函数的答案中的简短示例 http stackoverflow com questions 2879679 where to put code snippets in rails 在 lib ma
  • SQL查询大约需要10 - 20分钟

    我有一个选择 没什么复杂的 Select from VIEW 该视图大约有 6000 条记录和大约 40 列 它来自 Lotus Notes SQL 数据库 所以我的 ODBC 驱动程序是 LotusNotesSQL 驱动程序 执行该查询大
  • 如何防止触摸空格键时键盘从数字变为字母?

    I have UITextFields在表格上输入值 其中一些字段只接受数字 我在用UIKeyboardTypeNumbersAndPunctuation对于键盘类型 以及shouldChangeCharactersInRange来过滤字符
  • git 我可以加快提交速度吗?

    我在共享文件夹中有一个大存储库 我在该文件夹的虚拟机中使用 git 一切都很好 但存储库很大 git 正在搜索所有目录和文件 当提交缓慢时 我无法将此存储库移出共享文件夹 我尝试过了git add特定文件和目录 但当我这样做时git com
  • 带有通配符的主干事件

    有没有办法监听命名空间的所有事件 所以当我听到这样的事件时 app vent on notification id function type console lof type 它将监听所有这样的事件 app vent trigger no
  • JavaScript - myArray.forEach 与 for 循环的细微差别

    我看到很多建议使用的问题 for var i 0 i lt myArray length i 代替 for var i in myArray 对于数组 由于迭代不一致 see here https stackoverflow com que