Javascript forEach数组方法不更改对象属性

Question

抱歉，这对某些人来说可能是显而易见的，但是有人可以向我解释一下为什么单击事件调用的此函数没有采用数组中当前元素的状态，该元素是具有state属性的对象：“ active”，将其更改为null ，然后获取数组中的下一个也是对象的元素，并将其state属性更改为“ active”，而是抛出诸如“无法设置undefined的属性'state”之类的错误消息？

先感谢您！

var array = [{
    state : 'active'
}, {
    state : null
}, {
    state : null
}];

document.addEventListener('click', function() {
    array.forEach(function(element, index, array) {
        if(element.state === 'active') {
            element.state = null;
            array[index+1].state = 'active';
        }
    });
});

Answer 1

问题不在于它不执行，而是执行，然后循环继续进行，现在下一个元素是“活动的”。 这样做会一直到最后一个元素抛出错误为止，因为您正尝试访问数组之外​​的索引。

尝试这个：

var i = null;
array.forEach(function(element, index, array) {
    if(element.state === 'active') {
        i = index;
    }
});

if (i !== null && i + 1 < array.length) { 
    array[i].state = null;
    array[i+1].state = 'active';
}