for循环的最优使用

深碍√TFBOYSˉ_ 2023-02-13 08:57 10阅读 0赞

## 一、for循环        ##

在`for`循环中，你可以循环取得数组或是数组类似对象的值，比如`arguments`和`HTMLCollection`对象。我们一般情况下使用for循环是这样，如下：

for (var i = 0; i < myarray.length; i++) {
       // 循环体
    }

这种形式的循环在每次循环的时候数组的长度都要去获取下。这会降低你的代码，尤其当`myarray`不是数组，而是一个`HTMLCollection`对象的时候。`HTMLCollections`指的是DOM方法返回的对象，例如：

document.getElementsByName()
    document.getElementsByClassName()
    document.getElementsByTagName()
    document.images: 页面上所有的图片元素
    document.links : 所有a标签元素
    document.forms : 所有表单
    document.forms[0].elements : 页面上第一个表单中的所有域

集合的麻烦在于它们实时查询基本文档（HTML页面）。这意味着每次你访问任何集合的长度，你要实时查询DOM，而DOM操作一般都是比较昂贵的。

### 1.这时候我们可以在循环获取值时，缓存数组(或集合)的长度，如： ###

for (var i = 0, max = myarray.length; i < max; i++) {
       //循环体
    }

这样，在这个循环过程中，你只检索了一次长度值。

在所有浏览器下，循环获取内容时缓存`HTMLCollections`的长度是更快的。

注意到，当你明确想要修改循环中的集合的时候（例如，添加更多的DOM元素），你可能更喜欢长度更新而不是常量。

### 2.最后一个需要对循环进行调整的是使用下面表达式之一来替换`i++` ###

i = i + 1 或i += 1

注：jslint中不建议写++ -- ，`++ --`是鼓励了一种不够严谨的编程风格，大多数的缓冲区溢出错误所照成的安全漏洞，都是由像这样的编码照成的，使用`++ --`的时候，代码往往会变的拥挤、复杂和隐晦。对解析器来说不是很友好。

### 3.还有两种变化的形式，其又有了些微改进 ###

//第一种变化的形式：
    var i, myarray = [];
    for (i = myarray.length; i–-;) {}

//第二种使用while循环：
    var myarray = [], i = myarray.length;
    while (i–-) {}