麻了,splice()深坑

114 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情。(juejin.cn/post/705288… "juejin.cn/post/705288…

js 删除数组中的某个元素

比如: 删除数组中的 3

 const result = [1,2,3,4,5]
        for (let i = 0; i < result.length; i++) {
            if (result[i] === 3) {
                result.splice(i, 1)
            }
        }
        console.log(result);

image.png

看起来一点问题都没有是吧!

但是 如果数组修改成了:

 const result = [1,2,3,3,4,5]

image.png

发现 元素 3 还是剩下一个 !!!

分析:

 const result = [1, 2, 3, 4, 5]
        for (let i = 0; i < result.length; i++) {
            if (result[i] === 3) {
                let num = result.splice(i, 1)
                console.log(`元素 %c${num} 删除了`, 'color:#f00');
            } else {
                console.log('元素 '+result[i] + " 没有被删除");
            }
        }

image.png

发现元素 4 没有被遍历到

说明原数组是被改变了

mdn: splice()  方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组

原因:

   const result = [1,2,3,3,4,5]
                     // 0 1 2 3 4,5      
                     // 当遍历到3的时候 数组变成了  [1,2,3,4,5]  
                     //0 1 2 3 4 
                     // (但是索引还是从3继续开始遍历 [1,2,3,4,5]这里开始就会把原来的3给跳过了)

so: 加上了 i-- 就解决了

  const result = [1,2,3,3,4,5]
        for (let i = 0; i < result.length; i++) {
            if (result[i] === 3) {
                let num = result.splice(i, 1)
                console.log(`元素 %c${num} 删除了`, 'color:#f00');
                i--;
            } else {
                console.log('元素 '+result[i] + " 没有被删除");
            }
        }

image.png

马上去检查自己的代码吧!