关于前端: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  条件不成立
    循环完结
*/