JS 应该是根据数组排序和索引添加obj的问题

Question

做了一个demo 我用的PixiJS

先遍历了数据库英雄列表，把这些英雄添加到 heroCont 这个父容器，然后通过单击每个英雄在下方五个框中按顺序再绘制相应的英雄。

还可以单击下面的五个英雄，把相应的英雄删除。

现在遇到的问题是，比如当我反复删除和添加几次后，原本应该绘制在下面五个中下标 [2] 的图标会加到 [3]里甚至是之后的其他里。然后怎么点也不绘制了。

下面是代码：

let heroArr = ["","","","",""];

heroCont.on('pointerup',(e) => {
                         if(childs.children.length < 6 ){
                               let qi = new Container();
                                   qi.interactive = true;
                          for(let j=0;j<heroArr.length;j++){
                            if(heroArr[j]==""){
                              showHeros(playerHeros[i],qi);
                              qi.x = saveX[j];
                              qi.y = heroBucketCont.y;
                              childs.addChild(qi);
                              heroArr.splice(j,1,1); 
                              break
                            }
                         }
                       qi.on('pointerup',(e) => {
                          for(let j=0;j<heroArr.length;j++){
                            if(heroArr[j] == 1){
                              let inx = childs.getChildIndex(qi);
                               childs.removeChildAt(inx);
                               heroArr.splice(inx,1,"");
                               break
                            }
                          }
                       });
               }
                  });

我尝试了添加判断，还是不行。
数组heroArr 是为了定位下面五个英雄的顺序

playerHeros[i] 是英雄相关图片信息

我想的是点击 heroCont 创建 qi 这个容器，遍历 heroArr 查看他的元素值里有没有为 "" 的，如果有就用  showHeros(playerHeros[i],qi) 绘制出来，再把每个 qi 添加到 childs 这个总的容器里，并设置相应的 heroArr 值为1
（以上代码成功实现了）

之后点击 qi 通过 heroArr[j] == 1 （heroArr[j] == 1可以不用判断）后 ，inx 得到 qi 在 childs 中的下标，并设置相应的 heroArr 值为 "" ，这样循环。

可是比如当我反复删除和添加几次后，原本应该绘制在下面五个中下标 [2] 的图标会加到 [3]里甚至是之后的其他里。然后怎么点也不绘制了。

会是什么原因造成的？

Answer 1

你这种不是某种知识点问题，而是如何写好代码的问题。把你的代码拆成几个简单的功能明确的函数，单独测试这些函数的正确性，再组装起来使用。