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

最新推荐文章于 2024-01-26 17:49:30 发布

xunfengZ

最新推荐文章于 2024-01-26 17:49:30 发布

阅读量382

点赞数

分类专栏： bug解决

本文链接：https://blog.youkuaiyun.com/xunfengZ/article/details/109360975

版权

bug解决专栏收录该内容

5 篇文章

订阅专栏

在开发购物车多选删除功能时，遇到一个bug：当选中多个商品进行删除时，只能删除一部分。问题出在遍历获取的节点集合上，直接用for循环遍历会导致遍历不完全。解决方案是将伪数组转换为真数组后再进行遍历和删除操作，以此确保所有选中商品都能正确删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写购物车页面多选删除时遇到了一个之前从没在意过的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);
        }

结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201029152919856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1bmZlbmda,size_16,color_FFFFFF,t_70#pic_center
使用for直接遍历liobjs，且删除节点时：

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

结果：
在这里插入图片描述

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

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

结果：
在这里插入图片描述