JavaScript循环两种写法的区别

Question

方式一：

for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
    checkboxItems[i].checked = false;
    for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (checkboxItems[i].value == values[j]) {
            checkboxItems[i].checked = true;
            break;
        }
    }
}

方式二:

for(var i=0; i<checkboxItems.length; ++i){
   checkboxItems[i].checked = false; 
   for (var j = 0; j<values.length; ++j) {
        if (checkboxItems[i].value == values[j]) {
            checkboxItems[i].checked = true;
            break;
        }
    }
}

这两种写法有什么区别
代码出自微信小程序weUI：微信小程序weUI

Answer 1

唯一的问题是方法1每次判断循环条件时都会检查数组的长度.

轻则浪费性能, 重则酿成大错.

想想如下的代码

    <ul id="ul">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>


    <script>
        var items = document.getElementsByClassName('item'),
            ul = document.getElementById('ul');

        for(var i = 0; i < items.length; i++) {
            var node = document.createElement('li');
            node.className = 'item';
            ul.appendChild(node);
        }
    </script>

如果是遇到HTMLCollection这种动态的类数组, 则每次循环时的长度都会变化. 方法1当然不适用.

Answer 2

方式2每次循环都要查询checkboxItems.length和values.length，开销变大。

Answer 3

方法一的缺点是不能检测到循环过程中数组长度的变化