JavaScript数组塌陷实例解析

 更新时间:2023年05月23日 11:08:18   作者:陆荣涛  
这篇文章主要为大家介绍了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数组塌陷的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序实现原生步骤条

    微信小程序实现原生步骤条

    这篇文章主要为大家详细介绍了微信小程序实现原生步骤条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 一文详解fetch,ajax,axios的区别以及使用

    一文详解fetch,ajax,axios的区别以及使用

    在现代Web开发中,数据交互是必不可少的环节,这篇文章主要介绍了fetch,ajax,axios的区别以及使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-07-07
  • JS 的继承方式与使用场景对比分析

    JS 的继承方式与使用场景对比分析

    本文介绍了JavaScript中六种主要的继承实现方式及其适用场景,并推荐在现代项目中优先使用ES6的class继承,每种继承方式都有其特点和适用范围,选择合适的继承方式对于编写清晰、高效的JavaScript代码至关重要,感兴趣的朋友一起看看吧
    2025-02-02
  • js实现键盘Enter键提交表单的方法

    js实现键盘Enter键提交表单的方法

    这篇文章主要介绍了js实现键盘Enter键提交表单的方法,涉及javascript键盘事件的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript中new关键字的使用详解

    JavaScript中new关键字的使用详解

    在 JavaScript 中,new 关键字不仅是面向对象编程的关键要素,还是创建实例的重要手段,本文将深入探讨 new 关键字的使用,理解它在对象创建和构造函数调用中的作用,需要的朋友可以参考下
    2023-11-11
  • JS实现上传图片的三种方法并实现预览图片功能

    JS实现上传图片的三种方法并实现预览图片功能

    在用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览,实现思路有两种,具体实现方法和实例代码大家参考下本文
    2017-07-07
  • 百度地图api应用标注地理位置信息(js版)

    百度地图api应用标注地理位置信息(js版)

    弄了一个百度地图来标注地理位置信息,通过百度api来获取地址。这地图api是javascript版,感兴趣的朋友可以了解下,或许对你有所帮助
    2013-02-02
  • html5 canvas 详细使用教程

    html5 canvas 详细使用教程

    本文主要对html5 canvas的使用进行了详细的介绍。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 前端Echarts自适应分辨率和缩放功能代码实例

    前端Echarts自适应分辨率和缩放功能代码实例

    ECharts提供了自适应功能,可以自动调整图表大小以适应屏幕变化,下面这篇文章主要给大家介绍了关于前端Echarts自适应分辨率和缩放功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • javascript实现下雨效果

    javascript实现下雨效果

    本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论