for 循环,while 循环,do…while 循环和其他 JavaScript 循环-比较和性能

3,174 阅读5分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

英文原文链接:For Loop, While Loop, Do…while Loop and Other JavaScript Loops – Comparison and Performance

五种循环

循环在软件开发中起着至关重要的作用,它们用于遍历数组或其他可迭代元素。在 Javascript 中,我们有几种不同类型的循环。在特定情况下,我们应该使用哪个循环,而在性能方面,哪个循环最好,这有时会让人感到困惑。在本文中,我将比较 Javascript 中的循环,描述它们的优缺点,测试每个循环的速度。

for 循环 和 forEach() 遍历

这是 Javascript 中最常见的循环,也是最常用的循环,它在代码块中循环指定次数。让我们看看 for 循环的代码语法:

for (let i = 0; i <= 20; i++) {
  console.log(‘www.duomly.com’);
}

它由三个元素组成,被分号分割。首先,我们需要用**初始化器(initializer)**初始化启动循环的变量:

let i = 0;

下一个元素是测试条件,它检查代码将执行多少次:

i <= 20

最后一个元素是 更新器(updater) ,它在每次迭代结束时被调用,以增加或减少循环的计数器。这个循环是非常灵活的,我们可以在任意点运行它也可以在任意点停止它,这也不是很难理解的。for 循环的缺点它不是任意类型数据都合适,如果你不能很好地理解它,它很容易搞砸。

性能: 现在让我们简单地测试一下 for 循环在不同浏览器中的速度。我将在 Chrome, Safari 和 Firefox 中调用以下代码来检查循环的速度:

var counter = 1000;
var t0 = performance.now();
for (let i = 0; i < counter; i++) {
  console.log(‘www.duomly.com’);
}
var t1 = performance.now();
console.log(“For…loop ” + (t1 – t0) + ” milliseconds.”);

测试结果

ChromeFirefoxSafari
154.41 ms243.56 ms13 ms

对于 for 循环,值得一提的是它可以通过 forEach() 数组方法进行交换。让我们来看看它是如何工作的:

var array = [10, 20, 30, 40];
array.forEach((item, index) => { console.log(item) });

正如您在上面的示例中所看到的,forEach() 方法也遍历一个数组,但是这里我们没有指定条件或更新器,而是遍历给定的数组,并且可以返回每个项。让我们来检查一下这个方法的性能:

var array = Array.from(Array(1000).keys(), n => n + 1);
var t0 = performance.now();
array.forEach((item, index) => { console.log(‘www.duomly.com’); });
var t1 = performance.now();
console.log(“.forEach() ” + (t1 – t0) + ” milliseconds.”);

测试结果

ChromeFirefoxSafari
156.41 ms180 ms12 ms

根据我们的测试结果,我们可以看到,forEach 方法在 Firefox 和 Safari 浏览器中更快,但在 Chrome 中要多花 3 毫秒。

while 循环

while 循环与 for 循环非常相似,用于重复代码块,直到条件为假。当执行while 循环时,条件首先被求值,因此,如果条件在第一次迭代时为 false,则有可能根本不会调用代码块。让我们来看看 while 循环的语法:

var counter = 20;
var i = 0;
while (i < counter) {
  console.log(‘www.duomly.com’);
  i++
}

while 循环还包括测试条件、要执行的代码和更新程序。while 循环的主要优势是,它可以运行很长时间, 直到条件满足, 但另一方面它很容易忘记的是 —— 如果我们没有提供条件(会有 false 的结果)最终将会是一个无限循环, 这将导致应用程序的冻结。

性能: 让我们看看 while 循环可以有多快。我将基于以下代码在 Chrome、Firefox 和 Safari 上再次测试它:

var counter = 1000;
var i = 0;
var t0 = performance.now();
while(i < counter) {
  console.log(‘www.duomly.com’);
  i++;
}
var t1 = performance.now();
console.log(“While…loop ” + (t1 – t0) + ” milliseconds.”);

测试结果

ChromeFirefoxSafari
156.46 ms243.60 ms18 ms

do...while 循环

do...while 是另一种循环,它的工作原理与 while 循环几乎相同,但有一点不同,首先执行代码块,然后检查条件。让我们来看看 do...while 循环的语法:

var counter = 1000;
do {
  console.log(‘www.duomly.com’);
  i++;
} while (i < counter);

正如您在上面的代码片段中所看到的,首先我们要执行代码,它将至少运行一次,在第一个条件检查之前。在 do{} 里面,我们也有更新器,下面有一个条件测试。此循环的最大优点是,即使条件已经为假,也可以至少执行一次代码。

性能: 让我们测试另一个流行的 Javascript 循环的速度。同样,我将在 Chrome、Firefox 和 Safari 这三种浏览器上测试它,代码如下:

var t0 = performance.now();
var counter = 1000;
var i = 0;
do {
  console.log(‘www.duomly.com’);
  i++;
} while (i < counter);
var t1 = performance.now();
console.log(“Dowhile loop ” + (t1 – t0) + ” milliseconds.”);

测试结果

ChromeFirefoxSafari
116.19 ms189.71 ms18 ms

for...in 循环

for…in 循环是 Javascript 中的另一个 for 循环,它允许迭代对象属性,代码块将对每个属性执行一次。让我们看一下代码示例:

var person = {
  name: ‘Peter’,
  age: 19,
  city: ‘London’,
}for (let item in person) {
  console.log(‘key: ‘, item, ‘value: ‘, person[item]);
}

正如您在示例中所看到的,循环中的代码被调用的次数是我们在对象中拥有的属性的次数。在这种循环中没有更新器和条件测试。这种循环的最大优点是可以遍历对象,这是其他循环无法实现的。

for...of 循环

for…of 循环是 ES6 引入的一个新循环,它也允许迭代可迭代的集合,这些可迭代的集合是带有 [Symbol.iterator] 属性的对象。它可以与数组或字符串一起使用。让我们看一下代码示例:

var string = ‘Duomly’;for (let char of string) {
  console.log(char)
}

性能总览

在本文中,我测试了三个流行的循环和一个数组方法(for 循环、while 循环、do while 循环 和 forEach() 方法)的性能。我在三个不同的浏览器中用相同的执行量测试了它。现在让我们来看看并总结一下我们得到的所有数据。

Loop typeTime in ms
for…循环154.41 ms\
forEach()156.41 ms\
while…循环156.46 ms\
do…while 循环116.19 ms

所有循环都在 Chrome 浏览器中进行了测试。正如我们在表中看到的,do…while 循环是最快的。for 循环是第二快的,而 foreach() 方法在测试环境中似乎是最慢的。

总结

在本文中,我描述了 Javascript 编程语言中可用的五个不同循环,并测试了其中三个循环的性能。另外两个循环的工作方式不同,所以比较是不可靠的。循环的使用在软件开发中非常常见,但是作为开发人员,我们需要记住正确的实现和避免嵌套循环,因为它对性能有不好的影响。同样,在 while 循环中,重要的是要注意在某些时候需要为 false 的条件,以避免破坏代码。小心你的循环,并有一个良好的编码。