为什么 IE[89] 将数组转换为带有数字/字符串键的对象？

Question

我有以下由服务器注入网页的 JavaScript 变量。

<script type="text/javascript">
var jsonData = [{"display_mode":...}];
</script>

页面上有一个按钮，可根据需要通过 AJAX 将此数据发送回以应用一些转换。这适用于 Chrome、FF、IE10 和 IE11。

在 IE8 和 IE9 中，这个数组被区别对待，当你使用 IE8 调试器观察窗口时，你会看到

当它将此数据发送到服务器时，它看起来像这样：

'{"0":{"display_mode":"TREE",...

请注意，一旦离开浏览器，数组现在是一个带有字符串键的对象，但在浏览器中它是一个带有整数键的对象，而当它在源中发送时是一个真正的数组。

应该是这样的：

'[{"display_mode":"TREE",....

我在做什么来触发这个浏览器中的这种行为？有什么方法可以不触发这种行为吗？

我正在使用 extjs4.2.2 序列化 JSON，就像在 IE10、11、Chrome 和 FF 上一样。只有在这些版本的 IE 上，它才会将数组更改为键控对象以进行序列化

现在我正在研究一个解决方案，我将迭代假数组并构建一个新的有效数组，以根据 extjs 框架检测到的版本发送回网络服务器。我不喜欢添加这样的代码，因为版本检测很脆弱。我宁愿这从一开始就不会发生。

Answer 1

当你在 IE8 中查看原始的 jsonData 变量时，它显示如下：

幸运的是，这也将使用 Ext.isArray() 检测为 NOT 数组。因此，了解数据结构后，我可以执行以下操作：

var fixed, items, t, i, transaction;

// This fix is here for ie8 and ie9 to turn the arrays back into arrays
if(!Ext.isArray(jsonData)) {
    fixed = [];
    for(t=0; t < jsonData.length; ++t) {
        transaction = jsonData[t];
        items = [];
        for(i=0; i < transaction.items.length; ++i) {
            items.push(transaction.items[i]);
        }
        transaction.items = items;
        fixed.push(transaction);
    }
    jsonData = fixed;
}

在我这样做之后，调试显示为：

请注意，在我更正之后，“对象”有一个叫做[方法]的东西。这使得它可以正确序列化为 JSON 数组。我怀疑正在发生的事情，但由于 IE 的糟糕工具集，我无法完全证明它们在解析脚本标记时进行了从数组到对象的转换。这不会在浏览器中引起任何操作问题，因为这些数组/对象支持长度，允许循环迭代，Ext.each 有效，它们在内部的行为类似于数组。但是序列化程序识别出差异并以错误的方式将它们发回。

关于正在发生的事情的另一个数据点来自 javascript 控制台

jsonData 看起来像一个对象，但表现得像一个数组，因为我可以为 jsonData.length 返回一个有效值（这是在我“更正”数组之前）。如果我创建一个真实对象 x，并尝试获取它的长度，我会得到我所期望的未定义。因此，我将把它归结为另一个 IE 缺陷。如果其他人遇到这个问题，至少会更容易解决。