记伪数组遍历时无法完整遍历的bug

程序员文章站 2022-03-15 22:56:48

...

今天在写购物车页面多选删除时遇到了一个之前从没在意过的bug。当我选中2个及以上的商品点击删除时，只能删除1个或者一小部分商品，这就让我很费解了：以前for循环遍历删除节点都没问题呀，今天的问题出在哪了呢？经过一系列排查，发现获取到的节点集合不能直接遍历，可能有时候会侥幸得到正确的结果，但是总有栽坑的时候。所以需要转为真数组之后再遍历。
示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>0</li>
    </ul>
    <script>
    	//获取所有li节点
        let liobjs=document.getElementsByTagName('li');
    </script>
</body>
</html>

使用for直接遍历liobjs，但不删除节点时：

        //for方法遍历
        for(var i=0;i<liobjs.length;i++){
            console.log(i);
        }

结果：
记伪数组遍历时无法完整遍历的bug
使用for直接遍历liobjs，且删除节点时：

        //for方法遍历
        for(var i=0;i<liobjs.length;i++){
            console.log(i);
            liobjs[i].remove();
        }

结果：
记伪数组遍历时无法完整遍历的bug

转为真数组再遍历时，遍历和删除都是完美实现的：

        //转为真数组再遍历
            Array.from(liobjs).forEach(e => {
                 console.log(e);
                 e.remove()
             });

结果：
记伪数组遍历时无法完整遍历的bug