Динамически создаваемый элемент Select отличается в FF и Chrome

Question

При создании в JavaScript элемента Select возникает некоторая странность:

var items = {"3":"Three","1":"One","2":"Two"};
var elem = document.createElement("select");

for ( var key in items) {
    var ov = document.createElement("option");
    ov.value = key; 
    ov.appendChild(document.createTextNode(items[key]))
    elem.appendChild(ov);
}

document.getElementById('someDiv').appendChild(elem);

FF create Элемент Select с начальным порядком элементов (Three, One, Two).Chrome сортирует элементы по ключу и выводит их следующим образом (один, два, три).

Почему это происходит?А как предотвратить сортировку в Chrome?

Answer 1

Оператор for … in выполняет итерации по объекту в непредсказуемом порядке.Как сказано в MDC , :

Цикл for...in перебирает свойства объекта в произвольном порядке (подробнее см. Оператор удаления ).никто не может зависеть от кажущейся упорядоченности итерации, по крайней мере, в кросс-браузерной настройке.

Вам лучше использовать массив объектов и использовать обычный цикл for, чтобы сохранить заданныйпорядок, например:

var items = [{"3":"Three"}, {"1":"One"}, {"2":"Two"}];

for (var i = 0; i < items.length; i++}
    /* etc */ ;

Просто замечание: при переборе объекта с использованием for … in вам действительно следует использовать hasOwnProperty, чтобы проверить, является ли оно наследуемым свойством или нетв противном случае вы можете включить наследуемые свойства в поле select.