浅谈for/in与 HTMLCollection-优快云博客

本文详细解析了JavaScript中的for/in遍历机制及其局限性，特别针对数组和HTMLCollection进行了对比分析，并介绍了使用数组自带的foreach方法以及如何方便地遍历HTMLCollection中的元素。同时，提供了实例代码来辅助理解。

1 理解for/in

for/in只遍历对象的可枚举属性。

同时，数组也是对象，所以for/in可以用来遍历数组。

只是当我们定义的是一个普通数组，即key为数字，此时数组的属性就是数字，因此for/in返回的属性值也就是数字。

想要获得数组中每个元素的值，还需要通过array[key]获得，下面将介绍一种直接获得的方法。

举个例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>array-for-in</title>
</head>
<body>
    <script type="text/javascript">

    var array = ["tom",'jerry','coco'];

    for( element in array){
        alert(element); //返回 0,1,2
    }

    </script>
</body>
</html>

2 理解HTMLCellection

HTMLCollection是HTML元素的集合，虽然它也是对象（typeof可以测试），但是集合是没有key-value对的，所以不能使用for/in遍历HTMLCollec。

NodeList同理。

如果强行使用for/in，会返回HTMLCollection长度两倍的undefined（为什么是两倍笔者现在也不知道，有知道的麻烦告知）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTMLColletion</title>
</head>
<body>

    <div>test div1</div>
    <div>test div2</div>
    <div>test div3</div>


    <script type="text/javascript">

        var divs = document.getElementsByTagName("div");

        for(div in divs){
            alert(div.innerHTML);
        }


    </script>

</body>
</html>

正确姿势，可遍历到HTMLCollection中的每一个元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTMLColletion</title>
</head>
<body>

    <div>test div1</div>
    <div>test div2</div>
    <div>test div3</div>


    <script type="text/javascript">

        var divs = document.getElementsByTagName("div");


        for(var i=0;i<divs.length;i++){
            alert(divs[i].innerHTML);
        }


    </script>

</body>
</html>

3 如何方便遍历数组

使用数组自带的foreach方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>foreach</title>
</head>
<body>

    <div>test div1</div>
    <div>test div2</div>
    <div>test div3</div>


    <script type="text/javascript">

        var array = ["kerita","john","dorsun"];

        array.forEach( function(element, index) {
            window.alert(element);
        });

    </script>

</body>
</html>

HTMLCollection利用对象冒充也可以使用这种方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTMLColletion</title>
</head>
<body>

    <div>test div1</div>
    <div>test div2</div>
    <div>test div3</div>


    <script type="text/javascript">

        var divs = document.getElementsByTagName("div");

        [].forEach.call(divs,function(element){
            alert(element.innerHTML);
        });

    </script>

</body>
</html>