Javascript 数组随机丢失一个元素

Question

我遇到了一个非常奇怪的问题。我在我的一个站点上使用来自 JQueryUI 的 jsTree，并且我在不同的 .js 文件中使用了不同的实现。其中一个似乎可以工作，这非常令人困惑，因为它使用几乎相同的代码（只有变量名称不同）到被破坏的实现。问题来自上下文菜单功能。我使用的代码如下：

$(document).ready(function () {
    if(typeof dryerList == 'undefined' || dryerList.length == 0) {
        var dryerList = [];
        $.ajax({
            url:'../TrackingApp/getGrainBins.php?t=234.23423452353',
            async: false,
            success: function(text) {
                try {
                    dryerList = $.parseJSON(text);
                } catch (e) {
                    alert('ERROR: ' + e);
                }

                if(dryerList.length == 0) {
                    alert('ERROR: No fleet data received.')
                }
            }
        });
    }

    $("#dryerListTree").jstree({
        plugins : ['json_data', 'ui', 'themes', 'contextmenu'],
        contextmenu: {items: customBinMenu},
        json_data : { data: binNodes }
    });

    $('#dryerListTree').bind("dblclick.jstree", function (event) {
        var node = $(event.target).closest("li");
        var id = node[0].id;

        for(i=0; i < dryerList.length; i++) {
            if(id == dryerList[i].id) {
                centerMap(dryerList[i].y, dryerList[i].x);
                break;
            }
        }
    });
});


function customBinMenu(node) {
    if ($(node).hasClass("folder")) {
        return;
    }

    var items = {
        centerItem: {
            label: "Locate",
            action: function () {
                // Centers map on selected bin
                var id = node[0].id;

                for(i=0; i < dryerList.length; i++) {
                    if(id == dryerList[i].id) {
                        centerMap(dryerList[i].y, dryerList[i].x);
                        break;
                    }
                }
            }
        },
        dashboardItem: {
            label: "Dashboard",
            action: function () {
                // Opens dryer info window over map
                var id = node[0].id;
                var dryerIndex = -1;

                for(i=0; i < dryerList.length; i++) {
                    if(id == dryerList[i].id) {
                        dryerIndex = i;
                        break;
                    }
                }
            }
        }
    };

return items;
}

奇怪的是，双击处理程序工作得很好。当我到达 customBinMenu() 函数时，dryerList 数组就在那里，并且dryerList[0] 包含它应该包含的 5 个值中的 4 个 - 但不知何故，“id”元素已从该对象中删除。我已经研究了很长时间，但我无法弄清楚它如何在不丢失任何其他数据的情况下从对象中删除单个元素，尤其是当相同的代码适用于类似的列表时。有什么建议吗？

Answer 1

好的，我在您的问题中读到：'and dryList[0] 包含它应该包含的 5 个值中的 4 个 - 但不知何故，'id' 元素已从该对象中删除'
所以 'element' 和 'value' 我假设你的意思是“属性”：准确地说是节点的“id”属性？？

我在您的代码中看到：var id = node[0].id;

应该是：var id = node[0].getAttribute("id");

祝你好运！

更新 1：
好的，如果（根据您的评论）var id = node[0].id;（从节点 [0] 获取 id）没问题，那么 if(id == dryerList[i].id) 看起来是错误的，因为您只是（重新）将 id 定义为节点 [0] 的值身份证。
实际上，我不会使用 'id' 作为 var-name（在这种情况下）。

如果你这样做了怎么办：var idc = node[0].getAttribute("id");
然后：if(idc === dryerList[i].getAttribute("id"))

UPDATE 5：顺便说一句，您仍然有一些错误：

• 您忘记使用分号来关闭警报：
  if(dryerList.length == 0) { alert('ERROR: No fleet data received.') }
• 您应该在第 2 行和第 14 行使用 '===' 与 '0' 进行比较
• 在现实生活中，您自然会在将函数 customBinMenu(node) 用于您的 document.ready 函数之前定义它。
  通过交换代码顺序修复。
• 此 document.ready 函数也是如此，您在定义之前使用了 var dryList。
  修复者：var dryerList = dryerList || []; if(dryerList.length === 0){//ajax & json code}

您能否确认this fiddle，它现在是有效的javascript，代表您的预期基线代码，它仍然会导致您的在dryerList 的节点集合中“id”属性为“未定义”的问题（因为您发布的代码包含一些在此jsfiddle 中修复的简单错误，不包括更新 1 中提到的内容，因为你评论说这不是问题）？

请问（既然您从 document.ready 开始），您为什么（仍然）检查dryerList 是否已经存在？
请问您是否可以用一些演示数据更新更正的小提琴供我们玩弄？