Javascript HTMLCollection 对象在 firefox10 中无法正常工作

Question

我将 HTML 集合对象用作数组并将元素添加到其中。下面的代码，

var claimantEmailValues = document.getElementsByName("claimantEmails");
var defendantEmailValues = document.getElementsByName("defendantEmails");


var k = defendantEmailValues.length;
for(var i=0; i<claimantEmailValues.length;i++){
        defendantEmailValues[k++] = claimantEmailValues[i];
}

最后，defendantEmailValues 的长度应该是 4，因为我有两个 HTML 输入元素，分别用于 claimantEmails 和 defendantEmails。相反，长度为 2，并且没有错误。它在除 firefox 10 以外的所有 firefox 版本中都运行良好。有人能解释一下原因吗？

Answer 1

JavaScript 数组是具有神奇 长度属性的对象，当您将数字属性设置为等于或大于当前长度时，该属性会增加。 HTMLCollection 对象具有长度属性，但它不是魔法，并且在设置数字属性时不应增加。当您向它们添加一个元素时，您实际上只是将一个命名属性添加到一个对象，使用数字作为属性名称。

最好先使用 Array.prototype.slice 将集合转换为数组:

var slice = Array.prototype.slice,
    claimantEmailValues = slice.call(document.getElementsByName("claimantEmails")),
    defendantEmailValues = slice.call(document.getElementsByName("defendantEmails"));

var k = defendantEmailValues.length;
for(var i=0; i<claimantEmailValues.length;i++){
        defendantEmailValues[k++] = claimantEmailValues[i];
}

很可能是以前的 Firefox 版本的行为错误地允许将项目添加到 HTMLCollection 实例，并且该错误仅在 Firefox 10 中得到修复。