关于splice方法删除数组中的数据的问题

最新推荐文章于 2024-07-17 20:03:44 发布

官方哈哈

最新推荐文章于 2024-07-17 20:03:44 发布

阅读量1.2k

点赞数 1

分类专栏： # js 文章标签： js

本文链接：https://blog.csdn.net/qwerewf/article/details/109242677

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文通过一个示例展示了在遍历数组并使用splice删除元素时遇到的问题，即由于splice改变了数组长度导致未完全删除目标元素。解决方案是反向遍历数组或者在删除后调整循环索引。正确做法包括从后向前遍历或在删除后减小循环索引，确保所有符合条件的元素都被正确删除。

摘要由CSDN通过智能技术生成

在根据条件删除数组中的数组的时候，发现splice没有处理对应的数组，循环只执行一次。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试splice</title>
</head>

<body>
    <script>
        let arr = [{
            id: 1,
            name: '迪丽热巴',
            sex: 0
        }, {
            id: 2,
            name: '江疏影 ',
            sex: 0
        }, {
            id: 3,
            name: '胡歌',
            sex: 1
        }, {
            id: 4,
            name: '彭于晏',
            sex: 1
        }, {
            id: 6,
            name: '周星驰',
            sex: 1
        }, {
            id: 5,
            name: '刘德华',
            sex: 1
        }, {
            id: 7,
            name: '渣渣辉',
            sex: 1
        }, {
            id: 8,
            name: '张艺兴',
            sex: 1
        }];

        for (let i = 0; i < arr.length - 1; i++) {
            if (arr[i].sex === 1) {
                arr.splice(i, 1);
            }
        }
        console.log(arr);
    </script>
</body>

</html>

效果：
在这里插入图片描述
从打印的结果就可以看出，splice只删除了一部分。那怎么办呢？其实原因很简单，由于splice的操作它是会改变元素组的长度的，因此有些数据本该删掉的数据却保留了下来。

正确的方式：

方法一：
 for (let i = arr.length - 1; i >= 0; i--) {
            if (arr[i].sex === 1) {
                arr.splice(i, 1);
            }
        }
   方法二：
   for (let i = 0; i < arr.length; i++) {
            if (arr[i].sex === 1) {
                arr.splice(i, 1);
                i--;
            }
        }

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

官方哈哈

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
关于splice方法删除数组中的数据的问题

在根据条件删除数组中的数组的时候，发现splice没有处理对应的数组，循环只执行一次。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试splice</title>
复制链接

扫一扫

专栏目录