由一段JS代码引发的思考

不知道大家在编程的时候有没有遇到过这种情况,就是在循环遍历删除一部分内容的时候,发现只能删除其中一部分,而另一部分却总也删不掉,然后觉得自己的逻辑没有问题啊,于是陷入了深深的抑郁之中……

昨天在处理一段JS脚本的时候就遇到了这种问题,业务逻辑很简单,就是获取HTML某元素下的所有子元素,然后循环删除(其实更简单的方法是直接innerHTML赋值为空,这里只是讨论一下关于删除的问题)。我发现每次删除完,总是有剩余,也就是删不干净,于是我进行了调试,发现当有3个元素时删除完还剩1个,4个元素剩2个……接着就在利用console.log()在浏览器进行打桩,无意中发现返回值竟然是list集合!我是利用children属性来获取子元素的,代码如下:

var city = document.getElementById("city");

var nodes = city.children;

console.log(nodes);

for(var i = 0; i < nodes.length; i++){

city.removeChild(nodes[i]);

}

以前真心没有注意过,以为children属性返回的是数组。由于JS代码过于灵活,全都是var类型来接收,而且获取长度都是通过length,而不是像java中利用size(),确实不好区分。那么又开始思考一个问题,为什么list集合就出错?

我拿一段简单的java代码举个例子:

List<String> list = newArrayList<String>();

list.add("cc1");

list.add("cc2");

list.add("cc3");

list.add("cc4");

for (inti = 0; i < list.size(); i++) {

list.remove(i);

}

System.out.println(list);

执行结果是:

[cc2, cc4]

没错,有两个元素没有删掉!第一反应是list的长度在变化啊,在不断减小,就像这个例子,第一次i=0,list长度是4,而第二次i=1,list长度就变成了3,所以根本不会比较4次!于是很自然将代码进行修改:

int len =list.size();

for (inti = 0; i < len;i++) {

list.remove(i);

}

却发现数组越界!!!

这说明了一个问题,就是list的下标发生变化了!当经过思考终于明白,其实当你删除掉list[0]之后,原来的list[1]变成了现在的list[0],原来的list[2]变成了现在的list[1],所以这么删除才会下标越界!

那么不妨利用while循环一直删除第一项:

while(list.size() > 0){

list.remove(0);

}

这样结果就对了!回归到原来的JS代码,发现这样确实可以解决问题!

而且,你还可以倒着删除!

总结:

其实这原理很简单,大家都不难理解,关键就是怕有时候大家忽略这一点,一时想不到原因,所以才加以总结。

至少,我有了两点收获:

    1. JavaScript中也应该时刻关注一下返回值类型,处理数组和集合的手段还是不一样的。
    2. 循环删除集合元素,还是推荐用while,只要一直删除第一项或者最后一项即可,就像删除队列一样!
时间: 08-15

由一段JS代码引发的思考的相关文章

因一段JavaScript代码引发的闲扯

前两天,一朋友给我发了一段JavaScript代码: function f1(){ var n=999; nAdd=function(){ n+=1 }; function f2(){ alert(n); } return f2; } var result1=f1(); var result2=f1(); result1(); // 999 result2();//999 nAdd(); result1(); // 是999而不是1000,这是为何呢? result2();//1000 问题的原

我要崩溃了,要解出这么一段js代码背后的东西,这真是一坨啊,别被高度欺骗了,他还有宽度!!!!!试着按下方向右键

一坨js代码: 1 function s_gi(un, pg, ss) { 2 var c = "s.version='H.26';s.an=s_an;s.logDebug=function(m){var s=this,tcf=new Function('var e;try{console.log(\"'+s.rep(s.rep(s.rep(m,\"\\\\\",\"\\\\\\\\\"),\"\\n\",\"\\\

一道原生js题目引发的思考(鼠标停留区块计时)

我瞎逛个啥论坛,发现了一个题目,于是本着练手的心态就开始写起来了,于是各种问题接踵而至,收获不小. 题目是这样的: 刚看上去,没什么特别,心里想了,我就用mouseover和mouseout事件,然后绑个定时器不就行了嘛~.......于是还没开始写呢,就被问到了,那mouseover和mouseenter这两个事件有什么区别的?为什么不用mouseenter呢? 然后我就仔细想了下mouseover和mouseenter之间的区别,下面是书上列出的定义: ->mouseenter:在鼠标光标从

用一段JS代码来比较各浏览器的极限内存与运算速度

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var initTime=new Date(); //程序执行初始时间 var odd=0; //计数器 //生成不同的对象 functio

一段JS代码的理解和学习

<script type="text/javascript"> $(function() { var oTabBtn = $('.medicineChestNav').find('a');//获取class = medicineChestNav 下的<a>数组 oTabBtn.each(function(index, element) { //循环这个数组,当其中某一个被点击的时候 $(this).click(function() { oTabBtn.remov

防止横竖屏时,iphone自动缩放的一段js代码

function orientation_change() {     var viewport = document.querySelector('meta[name="viewport"]');     if (window.orientation == 0 || window.orientation == 180)         viewport.setAttribute("content", "width=device-width, maximu

在JSP中的java代码中调用js代码

out.println(str)方法就是在JSP服务端运行的时候把str输出到服务端返回给客户端的HTML页面 可以通过out.print()这种方式输出一段JS代码,这段JS代码先声明一个JS函数,声明结束后再调用一下这个方法. 例如: out.println("<script>function showMessage() {alert('set_afterlogin()');}</script>");//声明showMessage方法 out.println

中国省市 JS代码

很实用的一段JS代码, 用户注册的时候,选择地址常用到.代码如下: <script language="javascript"> var g_selProvince; var g_selCity; var Provinces=new Array( new Array("110000","北京市"), new Array("120000","天津市"), new Array("13000

优惠券 js代码分析

今天看到一段js代码,是关于抢淘宝代金券的js代码,发现这段代码不是很长,但是很具有代表性, 类似于网络爬虫程序,由于代码不长,对于理解爬虫程序很有帮助,然后分析了下这段代码. 下面贴出代码,并附上我的一些注释. 1 (function(window, document, undefined) { 2 var interval = 800; //设置等待时间 3 var closeDelay = 200; //设置等待时间 4 var index = 0; //定义索引,从0开始 5 var c