4 种在JavaScript中编写For循环的方法

女爷i 2022-08-29 06:18 200阅读 0赞

![b7fc55d0636a0a927d08db001010d205.png][]

原文 | https://medium.com/techtofreedom/4-ways-to-write-for-loops-in-javascript-d0db6aa8f7b6

翻译 | 杨小二

这些年来，JavaScript 发展得如此之快。如果你之前有其他编程语言经验的话，你可能无法相信在 JavaScript 中有4种方法可以编写for 循环。

正如黑格尔所说：“存在就是合理的。”在技术演进的过程中，网络的力量越来越强大。因此，对于现代 Web 开发的必然语言JavaScript 期望也越来越高。

for 循环的语法就是一个很好的例子。开发人员发现老式不够好，至少对于每个使用场景。一些第三方库或框架开始提供一些更好的循环功能。然后，新的JavaScript 标准出现了，你需要再次更新浏览器。

本文将按照出现的先后顺序总结 JavaScript for 循环的4种编写方式。阅读后，你可以像专家一样正确使用它们。

**1、C 风格的“三表达式” For 循环**

这是自 ECMAScript 3 (ES3) 以来可用的老式方法。我们可以用三表达式样式来编写 for 循环：

var a = [1,2,3,4]
    for (var i=0; i<a.length; i++){
        console.log(a[i])
    }

不用说，这是一种经典的 C 风格方式。 如果我们愿意，我们可以一直使用这种时尚。 但它在现代 JavaScript 项目中不像以前那么流行，因为我们现在有更方便的方法。

**2、“for…in…”循环**

为了使对象的迭代更容易，有一个“for...in...”语法，它也可以从 ES3 获得。

var author = {name: "Yang", job: "programmer"}
    for (var k in author){
        console.log(k + ':' + author[k]);
    }
    //name:Yang
    //job:programmer

使用这种方式的最佳实践是永远不要将它用于数组。 由于数组也是幕后的对象，每一项的索引都被视为对象的属性，索引顺序是依赖于实现的，数组值可能不会按照你期望的顺序访问。

应用“for...in... ”到数组可能会导致一些意想不到的结果。

以下是问题“为什么使用“for...in”进行数组迭代是个坏主意？”（*地址：https://stackoverflow.com/questions/500504/why-is-using-for-in-for-array-iteration-a-bad-idea*）的一个很好的例子。 在 StackOverflow 上。

// Somewhere deep in your JavaScript library...
    Array.prototype.foo = 1;
    
    
    // Now you have no idea what the below code will do.
    var a = [1, 2, 3, 4, 5];
    for (var x in a){
        // Now foo is a part of EVERY array and 
        // will show up here as a value of 'x'.
        console.log(x);
    }
    
    
    /* Will display:
       0
       1
       2
       3
       4
       foo
    */

因此，为了使你的代码没有错误，永远不要将“for...in...”应用于数组。

**3、 数组上的“forEach”方法**

由于“for...in...”不适用于数组。 应该有更好的迭代 JavaScript 数组的方法。 所以 ES5 引入了数组的迭代方法。 在我看来，这种改进使 JavaScript 变得优雅。

迭代方法很多，适用于不同的使用场景：

*  Array.forEach()
 *  Array.map()
 *  Array.filter()
 *  Array.reduce()
 *  Array.every()
 *  Array.some()
 *  …

由于这篇文章是在讨论 for 循环，我们通过一个简单的例子来看看如何使用 Array.forEach() 方法：

var author = [ 'Y', 'a', 'n', 'g' ];
    author.forEach(function(val){
        console.log(val);
    });
    // Y
    // a
    // n
    // g

**4、ES6 中的“for...of...”语法**

众所周知，ES6 是 JavaScript 的里程碑。 这个版本引入了许多很棒的功能。 “for...of...”方法就是其中之一。 它使事情变得更加优雅。

例如，我们可以像下面这样迭代数组的项：

let author = [ 'Y', 'a', 'n', 'g' ];
    for (let char of author){
        console.log(char);
    }
    // Y
    // a
    // n
    // g

**结论**

JavaScript 作为一种编程语言，不是静态的，而是不断发展的。 for 循环语法的扩展是展示它的一个很好的例子。

谢谢你的阅读。 如果你喜欢，别忘了关注我，获取更多关于编程和技术的精彩文章！

#  #

**学习更多技能**

**请点击下方公众号**

![15250a650a78f4c25f529fe5c40d8843.gif][]

![b5de594eed9f22ca92e52cbb45ccd411.png][]

![ea53b8bc62dec7d34816c2996b3972d9.png][]

[b7fc55d0636a0a927d08db001010d205.png]: /images/20220829/a6de5f2846ee4369a5a2487e4d42fc7e.png
[15250a650a78f4c25f529fe5c40d8843.gif]: /images/20220829/930c49a125f7412e82a93fe8e0ad3e2c.png
[b5de594eed9f22ca92e52cbb45ccd411.png]: /images/20220829/f7efa36a750c43c7ac0163f89aa7f653.png
[ea53b8bc62dec7d34816c2996b3972d9.png]: /images/20220829/4f45490af51849588435b982e342135e.png