Недавно меня спросили, обязательно ли свойства объектов JavaScript неупорядочены и непредсказуемы?

Разработчики, впервые знакомые с JavaScript, могут ответить, что Object.keys() или for...in возвращает непредсказуемый порядок свойств объекта. Но так ли это по-прежнему?

Как и следовало ожидать, теперь существуют правила, которым нужно следовать.

Начиная с ECMAScript 2020, Object.keys, for...in, Object.getOwnPropertyNames и Reflect.ownKeys следуют одному и тому же порядку спецификации. Они есть:

1. Собственные свойства — это индексы массива в порядке возрастания числовых индексов.

Индекс массива — это ключ свойства со строковым значением, который представляет собой каноническую числовую строку. А каноническая числовая строка — это строковое представление числа, которое будет создано ToString, или строки «-0». Так, например, «012» — это не каноническая числовая строка, а «12».

2. Другие собственные свойства String, в возрастающем хронологическом порядке создания свойств.

Приведенный выше код добавляет точку знаний цикла событий. Поскольку setTimeout — это асинхронная макрозадача, свойство c не было добавлено в obj при выводе console.log.

3. Собственные свойства Символа, в возрастающем хронологическом порядке создания свойств.

Свойство Символ такое же, как и свойство String, в возрастающем хронологическом порядке создания свойства. Но методы Object.keys, for...in, Object.getOwnPropertyNames не могут получить свойства символа объекта, а Reflect.ownKeys и Object.getOwnPropertySymbols могут.

Заключение

Когда ключи свойств объекта представляют собой комбинацию вышеуказанных типов, неотрицательные целочисленные ключи объекта (перечисляемые и неперечисляемые) сначала добавляются в массив в порядке возрастания, затем строковые ключи добавляются в порядке вставки. Наконец, ключи символов добавляются в порядке вставки.

Но если вы сильно зависите от порядка вставки, Map гарантирует это для вас.

Если вы нашли это полезным, рассмотрите подписку на мою рассылку новостей чтобы получать больше полезных статей и инструментов о веб-разработке. Спасибо за прочтение!