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数组塌陷的资料请关注脚本之家其它相关文章!

相关文章

  • 不用jQuery实现的动画效果代码

    不用jQuery实现的动画效果代码

    jQuery 框架用的人越来越多了, 无论是性能还是功能强大都不用多说.
    2010-11-11
  • 整理一些最近经常遇到的前端面试题

    整理一些最近经常遇到的前端面试题

    这篇文章主要给大家整理了一些在面试的时候经常遇到的前端面试题,本文总结的这三十道面试题都是一些最近碰到的一些较为有用的前端题目,相信会对大家面试具有一定的参考价值,需要的朋友可以参考学习,下面来一起看看吧。
    2017-04-04
  • bootstrap table服务端实现分页效果

    bootstrap table服务端实现分页效果

    这篇文章主要为大家详细介绍了bootstrap table服务端实现分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 微信小程序动画组件使用解析,类似vue,且更强大

    微信小程序动画组件使用解析,类似vue,且更强大

    这篇文章主要介绍了微信小程序动画组件,类似vue,且更强大使用解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript变量中var,let和const的区别

    JavaScript变量中var,let和const的区别

    这篇文章主要介绍了JavaScript变量中var,let和const的区别,JavaScript中一共有3种用来声明变量的关键字,分别是var、let和const,文章通过围绕主题展开对三个关键词的详细介绍,需要的朋友可以参考一下
    2022-09-09
  • JavaScript实现复选框全选功能

    JavaScript实现复选框全选功能

    这篇文章主要为大家详细介绍了JavaScript实现复选框全选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 6种javascript显示当前系统时间代码

    6种javascript显示当前系统时间代码

    这篇文章主要介绍了6种javascript显示当前系统时间代码,欢迎大家学习借鉴
    2015-12-12
  • 微信小程序 如何获取网络状态

    微信小程序 如何获取网络状态

    这篇文章主要介绍了微信小程序 如何获取网络状态,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 将Datatable转化成json发送前台实现思路

    将Datatable转化成json发送前台实现思路

    将Datatable转化成json可以将dt序列化成json,放到前台的隐藏控件hidBoundary中,具体的实现如下,有类似需求的朋有可以参考下
    2013-09-09
  • 浅谈javascript原型链与继承

    浅谈javascript原型链与继承

    这篇文章主要介绍了浅谈javascript原型链与继承的相关资料,需要的朋友可以参考下
    2015-07-07

最新评论