Javascript效率:'for' vs 'forEach'



2017 年 Javascript 中带有 for() 循环与 .forEach 的当前标准是什么?

我目前正在Udemy上通过Colt Steeles的"Web Dev Bootcamp"工作,他更喜欢forEach而不是for在他的教学中。但是,作为课程作业的一部分,我在练习中搜索了各种内容,我发现越来越多的建议使用for循环而不是forEach。大多数人似乎都说 for 循环更有效。

自课程编写以来(大约 2015 年),这是发生了变化,还是它们对每个课程的真正优缺点,人们会随着更多经验而学习。

任何建议将不胜感激。

for

for循环的效率要高得多。 它是一个循环构造,专门设计用于在条件为真时进行迭代,同时提供步进机制(通常用于增加迭代器)。例:

for (var i=0, n=arr.length; i < n; ++i ) {
...
}

这并不是说for循环总是更有效率,只是JS引擎和浏览器已经优化了它们。 多年来,关于哪种循环结构更有效(for,while,reduce,reverse-while等)一直存在妥协 - 不同的浏览器和JS引擎有自己的实现,提供不同的方法来产生相同的结果。 随着浏览器进一步优化以满足性能需求,理论上[].forEach可以以更快或与for相当的方式实现。

好处:

  • 有效
  • 提前循环终止(荣誉breakcontinue)
  • 条件控制(i<n可以是任何东西,不受数组大小的约束)
  • 变量作用域(循环结束后var ii可用)

对于每个

.forEach是主要迭代数组(也迭代其他可枚举对象,如MapSet对象)的方法。 它们是较新的,并提供主观上更易于阅读的代码。例:

[].forEach((val, index)=>{
...
});

好处:

  • 不涉及变量设置(遍历数组的每个元素)
  • 函数/箭头函数将变量范围限定为块
    在上面的示例中,val将是新创建的函数的参数。 因此,在循环之前调用val的任何变量都将在循环结束后保留其值。
  • 主观上更易于维护,因为它可能更容易识别代码在做什么 - 它迭代一个可枚举的;而for循环可以用于任意数量的循环方案

性能

性能是一个棘手的话题,在深谋远虑或方法方面通常需要一些经验。 为了提前(在开发时)确定可能需要多少优化,程序员必须对过去的问题案例经验有一个很好的了解,以及对潜在解决方案的良好理解。

在某些情况下,使用 jQuery 有时可能太慢(有经验的开发人员可能知道这一点),而其他时候可能不是问题,在这种情况下,库的跨浏览器合规性和执行其他功能(例如,AJAX、事件处理)的易用性值得节省开发(和维护)时间。

另一个例子是,如果性能和优化就是一切,那么除了机器或程序集之外,没有其他代码。 显然情况并非如此,因为有许多不同的高级和低级语言,每种语言都有自己的权衡。 这些权衡包括但不限于专业化、开发易用性和速度、维护便利性和速度、优化代码、无错误代码等。

方法

如果你没有很好地理解某些东西是否需要优化的代码,那么首先编写可维护的代码通常是一个很好的经验法则。 从那里,您可以在需要时测试和查明需要更多关注的内容。

也就是说,某些明显的优化应该是一般实践的一部分,不需要任何思考。 例如,考虑以下循环:

for (var i=0; i < arr.length; ++i ){}

对于循环的每次迭代,JavaScript 都会检索arr.length,这是每个周期的键查找成本计算操作。 没有理由不应该这样做:

for (var i=0, n=arr.length; i < n; ++i){}

这执行相同的操作,但只检索arr.length一次,缓存变量并优化代码。

最新更新