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;
}
想了半天不懂为什么,求大神解答
怪我咯2017-04-10 16:47:24
很简单,因为你删除一个元素之后,长度变化了
所以在遍历时删除元素并不是个好习惯,解决方法有两个:
简单粗暴的改成倒着遍历,for(var i = oNodes.length - 1; i > -1; i--) {...}
先遍历,查找到所有符合的条件的node之后记录下它的下标记录进一个数组例如delList,然后对delList倒排之后进行遍历删除原数组的项
最后,此问题与作用域毫无关系
黄舟2017-04-10 16:47:24
splice会直接修改原数组,即oNodes,这样你的length实际就变少了,但是len还是原来那么长,就会访问越界了。
eg. 原来oNodes成长15,len === 15,当匹配到一个后,由于splice就导致实际的oNodes.length === 14了,下次for循环到第15个的时候就越界了。
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;
}