Javascript 数组将最后一个元素指定为未定义

我正在尝试编写一个从数组中删除项的函数，您可以通过undo函数撤消删除操作。如果您将一个参数传递到以0作为第一项开始的undo函数中，并传递2（作为3项），那么它将返回未定义的最后一项，我不知道为什么会发生这种情况。 我尝试调整撤销函数，有时它返回数组中的空位置，甚至返回空x2

有人能解释一下为什么会这样吗

let testLista = ['Mars', 'Jupiter', 'Saturn', 'Sun'];
let testUndo = [];
let i = 0;

const delItem = del => {
    let indexOfDel = testLista.indexOf(del);
    if(testLista.includes(del)){
        testLista.splice(indexOfDel, 1);
        document.write(`<h3>Deleted: <em>${del}</em></h3>`)
        testUndo[i] = del;
        console.log('delItem() undo - ',testUndo);
        console.log('delItem() list - ',testLista);
        i++;
    }else{
       document.write(`<h2>That item does not exist! Available items: <em>${testLista.join(', ')}</em></h2>`);
    }
}

delItem('Sun');
delItem('Saturn');
delItem('Mars');
 
const undoFunc = (undo) => {

    if(undo >= 1 && undo < testUndo.length){
        for(let j = 0; j <= undo; j++){
            testLista[testLista.length] = testUndo[j];
            testUndo.splice(j, 1);
            console.log('Undo() - ', testUndo);
        }
    }else{
        testLista[testLista.length] = testUndo[testUndo.length-1];
        console.log('Undo() - ', testLista)
    }

};

让testLista=[‘火星’、‘木星’、‘土星’、‘太阳’]；
让testUndo=[]；
设i=0；
const delItem=del=>{
设indexOfDel=testLista.indexOf（del）；
if（testLista.includes（del））{
testLista.拼接（indexOfDel，1）；
document.write（`Deleted:${del}`）
testUndo[i]=del；
log（'delItem（）undo-'，testUndo）；
log（'delItem（）list-'，testLista）；
i++；
}否则{
document.write（`该项不存在！可用项：${testLista.join（'，'）}`）；
}
}
delItem（“太阳”）；
delItem（“土星”）；
delItem（“火星”）；
常量undoFunc=（撤消）=>{
if（undo>=1&&undo对于（设j=0；j问题是由于
testUndo.splice（j，1）；
函数中的
undo
造成的

splice（）方法在给定索引的数组中添加/删除项，并返回删除的项

注意：此方法更改原始数组

您正在迭代
j
直到
j问题是由于
testUndo.splice（j，1）；
在
undo
函数中

splice（）方法在给定索引的数组中添加/删除项，并返回删除的项

注意：此方法更改原始数组

在循环内使用
splice
迭代
j
和直到
j通常会导致不期望的结果：当通过它减小数组的大小，但增加循环变量时，存在两个问题：

您将跳过元素：
splice
将值向左移动，以填补删除值的空白。但在下一次迭代中仍会增加
j
，因此一个值会在迷宫中滑动


随着数组越来越短，最终
j
将指向一个索引，如果您没有缩短数组，该索引将一直存在，但现在它变短了，它指向数组的末尾之外，因此是
未定义的
值


解决方案是不要在循环内使用
拼接
，而只能在循环后使用一次，这样可以一次性删除所有迭代值：

        for(let j = 0; j <= undo; j++){
            testLista[testLista.length] = testUndo[j];
            console.log('Undo() - ', testUndo);
        }
        testUndo.splice(0, undo+1);

使用扩展语法，您甚至可以摆脱循环（仍然使用更符合逻辑的
undo
）定义：

在循环内使用
splice
通常会导致不期望的结果：当通过它减小数组的大小，但增加循环变量时，会出现两个问题：

您将跳过元素：
splice
将值向左移动，以填补删除值的空白。但在下一次迭代中仍会增加
j
，因此一个值会在迷宫中滑动


随着数组越来越短，最终
j
将指向一个索引，如果您没有缩短数组，该索引将一直存在，但现在它变短了，它指向数组的末尾之外，因此是
未定义的
值


解决方案是不要在循环内使用
拼接
，而只能在循环后使用一次，这样可以一次性删除所有迭代值：

        for(let j = 0; j <= undo; j++){
            testLista[testLista.length] = testUndo[j];
            console.log('Undo() - ', testUndo);
        }
        testUndo.splice(0, undo+1);

使用扩展语法，您甚至可以摆脱循环（仍然使用更符合逻辑的
undo
）定义：

另一个例子：


让行星=[‘水星’、‘金星’、‘地球’、‘火星’、‘木星’、‘土星’、‘太阳’]；
设deletedPlanets=[]；
const planetList=document.getElementById（'planet-list'）；
常量删除行星=（行星）=>{
const ind=行星。indexOf（行星）；
deletedPlanets.push（{ind，planet}）；
行星拼接（ind，1）；
drawPlanetList（）；
};
const drawPlanetList=（）=>{
planetList.innerHTML=''；
行星。forEach（（行星）=>{
const div=document.createElement（'div'）；
div.innerText=行星；
div.onclick=（）=>{
删除行星（行星）；
};
飞机名单.附属儿童（分部）；
});
}
常量deleteMultiple=（）=>{
删除行星（“火星”）；
删除行星（“木星”）；
删除行星（“太阳”）；
drawPlanetList（）；
}
常量撤消=（）=>{
如果（！deletedPlanets.length）{
返回；
}
const undobj=deletedPlanets.pop（）；
行星拼接（Undobj.ind，0，Undobj.planet）；
drawPlanetList（）；
}
drawPlanetList（）；
div{
填充：0.4em；
边框底部：1px嵌入灰色；
}
单击列表元素将删除它们。
删除多个
解开
另一个例子：


让行星=[‘水星’、‘金星’、‘地球’、‘火星’、‘木星’、‘土星’、‘太阳’]；
设deletedPlanets=[]；
const planetList=document.getElementById（'planet-list'）；
常量删除行星=（行星）=>{
const ind=行星。indexOf（行星）；
deletedPlanets.push（{ind，planet}）；
行星拼接（ind，1）；
drawPlanetList（）；
};
const drawPlanetList=（）=>{
planetList.innerHTML=''；
行星。forEach（（行星）=>{
const div=document.createElement（'div'）；
div.innerText=行星；
div.onclick=（）=>{
删除行星（行星）；
};
飞机名单.附属儿童（分部）；
});
}
常量deleteMultiple=（）=>{
删除行星（“火星”）；
删除行星（“木星”）；
删除行星（“太阳”）；
drawPlanetList（）；
}
常量撤消=（）=>{
如果（！deletedPlanets.length）{
返回；
}
const undobj=deletedPlanets.pop（）；
行星拼接（Undobj.ind，0，Undobj.planet）；
drawPlanetList（）；
}
drawPlanetList（）；
div{
填充：0.4em；
底边：1便士
`for j=1 | testUndo = ["Saturn", "Mars"]`

for(let j = 0; j <= undo; j++){
            testLista[testLista.length] = testUndo[0];
            testUndo.splice(0, 1);
            console.log('Undo() - ', testUndo);
        }

        for(let j = 0; j <= undo; j++){
            testLista[testLista.length] = testUndo[j];
            console.log('Undo() - ', testUndo);
        }
        testUndo.splice(0, undo+1);

        for(let j = 0; j < undo; j++) { // now `undo` is a count!
            testLista.push(testUndo[j]);
            console.log('Undo() - ', testUndo);
        }
        testUndo.splice(0, undo); // no more `+1`

        testLista.push(...testUndo.splice(0, undo));