search

Home  >  Q&A  >  body text

javascript - 有关作用域的问题

 var oNodes = [
            {id: 0, name: 'root', pid: -1},
            {id: 1, name: '默认分类', pid: 0},
            {id: 11, name: '默认子分类1', pid: 1},
            {id: 12, name: '默认子分类2', pid: 1},
            {id: 2, name: '家庭分类', pid: 0},
            {id: 21, name: 'bthte', pid: 2},
            {id: 22, name: 'ertw', pid: 2},
            {id: 23, name: 'tetvbg', pid: 22},
            {id: 24, name: 'erbgb', pid: 22},
            {id: 25, name: 'hnhfdg', pid: 2},
            {id: 3, name: '公司分类', pid: 0},
            {id: 31, name: 'vgbdhn', pid: 3},
            {id: 32, name: 'ndnhn', pid: 31},
            {id: 33, name: 'pnhnnhg', pid: 31},
            {id: 34, name: 'qgtrh', pid: 3}];
            
function delGroup(name) {
    for (var i = 0, len = oNodes.length; i < len; i++) {
        console.log(oNodes[i].name);//控制台提示此处 TypeError: oNodes[i] is undefined
        if(oNodes[i].name == name) {
            oNodes.splice(i,1);
            console.log(i);
        }
    }
    myTree.tree = oNodes;
    fragment = myTree.init(0);
    ul.innerHTML = fragment;
}

想了半天不懂为什么,求大神解答

PHP中文网PHP中文网2817 days ago168

reply all(5)I'll reply

  • 怪我咯

    怪我咯2017-04-10 16:47:24

    很简单,因为你删除一个元素之后,长度变化了
    所以在遍历时删除元素并不是个好习惯,解决方法有两个:

    • 简单粗暴的改成倒着遍历,for(var i = oNodes.length - 1; i > -1; i--) {...}

    • 先遍历,查找到所有符合的条件的node之后记录下它的下标记录进一个数组例如delList,然后对delList倒排之后进行遍历删除原数组的项

    最后,此问题与作用域毫无关系

    reply
    0
  • 黄舟

    黄舟2017-04-10 16:47:24

    splice会直接修改原数组,即oNodes,这样你的length实际就变少了,但是len还是原来那么长,就会访问越界了。
    eg. 原来oNodes成长15,len === 15,当匹配到一个后,由于splice就导致实际的oNodes.length === 14了,下次for循环到第15个的时候就越界了。

    reply
    0
  • PHPz

    PHPz2017-04-10 16:47:24

    array.splice(start, deleteCount[, item1[, item2[, ...]]])
    splice方法将会修改原始的数组,并将从start位置开始的元素删除,可以指定删除的数量deleteCount,如果不指定那么将删除start位置起的所有元素,此方法在删除的同时可以插入多个元素item1,item2,...

    function delGroup(name) {
        for (var i = 0, len = oNodes.length; i < len; i++) {
            console.log(oNodes[i].name);//控制台提示此处 TypeError: oNodes[i] is undefined
            if(oNodes[i].name == name) {
                oNodes.splice(i,1);
                console.log(i);
            }
        }
        myTree.tree = oNodes;
        fragment = myTree.init(0);
        ul.innerHTML = fragment;
    }

    你的代码执行oNodes.splice(i,1);后,oNodes实际长度会减少,而for循环中的i还是按原来的节奏在运行,那么就会导致i不断增加,而oNodes的长度不支持,就会发生越界的情况....
    这个就是TypeError: oNodes[i] is undefined出现的原因

    解决这个问题,你可以改成从后遍历的方式
    或者
    使用filter函数执行过滤
    修改原始数组是个不好的实践,要保证函数能够反复调用,同样的输入参数相同的输出结果~~~
    其它函数也要用到这个oNodes就不好玩了~~

    function delGroup(name) {
        var resultONodes=oNodes.filter(function(item){
          if(item.name===name){
            return true;
          }
          return false;
        });
        myTree.tree = resultONodes;
        fragment = myTree.init(0);
        ul.innerHTML = fragment;
    }

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-10 16:47:24

    函数参数name把对象中的name覆盖了吧,换个形参名字

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 16:47:24

    好吧,没有认真看。

    reply
    0
  • Cancelreply