Сортировка полей объектов в JavaScript (проблема в Chrome и Opera)

Часто объекты в JavaScript используются в качестве заменителей ассоциативных массивов в других языках, таких, как PHP. Например, мы можем передать с сервера в браузер список автомобильных марок в виде пар ключ-значение, где ключами являются id марок в нашей базе, а значениями — названия марок. Скажем, «ассоциативный массив» (он же объект) будет выглядеть так:

Теперь выведем содержимое списка с помощью перебора по методу for-in:

И тут проявляются различи между браузерами. Firefox и IE выведут в алфавитном порядке, как мы и задали. А вот Chrome и Opera отсортируют поля объекта в порядке возрастания ключа и выведут в данном случае в обратном порядке. Как же быть?


Первый вариант решения проблемы состоит в том, чтоб сделать текстовые ключи, например, задать «массив» таким образом:

Тогда ни один браузер не будет сортировать его по ключам, а выведет как есть. Минус этого метода состоит в том, что надо изменять формат отдаваемых сервером данных, что теоретически может привести к проблемам, если в большом проекте где-то еще есть функционал, «знающий» лишь старый формат.

Второй вариант — перед выводом превратить этот объект в настоящий javascript-массив и уже его отсортировать, не полагаясь на сортировку исходных данных и не заботясь о различиях в поведении браузеров. Сначала из объекта-«массива» создадим массив объектов, каждый из которых будет содержать поля id и name:

Теперь можно массив listNew отсортировать, воспользовавшись методом .sort(). Но дело в том, что сортируем-то мы не строки, а объекты, поэтому нельзя просто взять и запустить сортировку, сначала нужно написать функцию сравнения элементов массива между собой:

После этого можно легко отсортировать наш новый массив, применив данную функцию для сравнения:

И наконец, можем вывести получившийся список:

Теперь мы увидим, что элементы массива выводятся в нужном нам алфавитном порядке и не зависят от своих id. Причем, во всех браузерах одинаково.

Сотрите также цикл уроков по функциям в javascript, разъясняющий их особенности в этом языке.

Добавить комментарий