JavaScript数组塌陷现象与两种解决方案
作者:小括号时间:2026-10-30 19:22:57浏览:581
本文解析JavaScript中数组删除元素导致的塌陷现象。当使用splice删除元素时,后续元素前移导致索引错位。文章提供两种解决方案:一是从后向前倒序遍历删除,二是每次删除后执行i--操作,确保所有元素被正确移除。
什么是数组塌陷
在JavaScript中,当对数组执行删除单元操作时,被删除单元之后的所有单元会向前移动,顶替被删除单元的位置,从而导致数组长度减少。这种现象被称为数组的坍塌或塌陷。
// 需求: 要求删除掉数组中的所有元素,但是要一个一个的删除
// 定义一个数组
var arr = [3, 4, 44, 65, 56]
console.log('原始数组 : ', arr);
// 遍历循环数组
for (var i = 0; i < arr.length; i++) {
arr.splice(i, 1)
}
console.log('删除后的数组 : ', arr);
/*
分析:
代码开始执行这个时候
i===0 arr = [3, 4, 44, 65, 56]
arr.length = 5 结果是true
arr.splice(0,1)
i===1 arr = [4, 44, 65, 56]
arr.length = 4 结果是true
arr.splice(1,1)
i===2 arr = [4, 65, 56]
arr.length = 3 结果是true
arr.splice(2,1)
i===3 arr = [4, 65]
arr.length = 2 结果是falses
循环结束
*/解决方案一:
我们在循环遍历数组时,可以采用倒序循环的方式进行处理。
// 解决方案 方案一
var arr = [3, 4, 44, 65, 56]
console.log('原始数组 : ', arr);
// 遍历循环数组
for (var i = arr.length - 1; i >= 0; i--) {
arr.splice(i, 1)
}
console.log('删除后的数组 : ', arr);
/*
分析:
代码开始执行;
i === 4 arr = [3, 4, 44, 65, 56]
这个时候4是大于0的 条件成立
arr.splice(4,1)
i === 3 arr = [3, 4, 44, 65]
这个时候3也是大于0 的 条件成立
arr.splice(3,1)
i === 2 arr = [3, 4, 44]
这个时候也是大于0 的 条件成立
arr.splice(2,1)
i === 1 arr = [3, 4]
这个时候1也是大于0 的 条件成立
arr.splice(1,1)
i === 0 arr = [3]
这个时候0是等于0 的 条件成立
arr.splice(0,1)
i === -1 arr = []
这个时候-1不大于等于0 的 条件不成立
循环结束
*/解决方法二
即在每次执行删除操作后,手动执行一次 i-- 操作,以补偿索引的变化。
// 解决方案 方案二
var arr = [3, 4, 44, 65, 56]
console.log('原始数组 : ', arr);
// 遍历循环数组
for (var i = 0; i < arr.length; i++) {
arr.splice(i, 1)
i--
}
console.log('删除后的数组 : ', arr);
/*
分析:
代码开始执行
i === 0 arr = [3, 4, 44, 65, 56]
arr.length = 5 条件成立
arr.splice(0, 1)
这个时候执行了 i--
i === 0 arr = [4, 44, 65, 56]
arr.length = 4 条件成立
arr.splice(0, 1)
i === 0 arr = [ 44, 65, 56]
arr.length = 3 条件成立
arr.splice(0, 1)
i === 0 arr = [ 65, 56]
arr.length = 2 条件成立
arr.splice(0, 1)
i === 0 arr = [ 56]
arr.length = 1 条件成立
arr.splice(0, 1)
i === 0 arr = []
arr.length = 0 条件不成立
循环结束
*/以上就是JavaScript数组塌陷实例解析的详细内容,更多关于JavaScript数组塌陷的资料请关注本站其它相关文章!
作者最新文章
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
