javascript - 有关作用域的问题

Question

 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;
}

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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;
}

Answer 4

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

Answer 5

好吧，没有认真看。