小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
英文原文链接: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.”);
测试结果
Chrome | Firefox | Safari |
---|---|---|
154.41 ms | 243.56 ms | 13 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.”);
测试结果
Chrome | Firefox | Safari |
---|---|---|
156.41 ms | 180 ms | 12 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.”);
测试结果
Chrome | Firefox | Safari |
---|---|---|
156.46 ms | 243.60 ms | 18 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(“Do…while loop ” + (t1 – t0) + ” milliseconds.”);
测试结果
Chrome | Firefox | Safari |
---|---|---|
116.19 ms | 189.71 ms | 18 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 type | Time 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 的条件,以避免破坏代码。小心你的循环,并有一个良好的编码。