Alguém me perguntou recentemente: as propriedades dos objetos JavaScript são necessariamente desordenadas e imprevisíveis?

Desenvolvedores com exposição inicial ao JavaScript podem responder que Object.keys() ou for...in retorna uma ordem imprevisível de propriedades do objeto. Mas ainda é assim?

Como seria de esperar, agora existem regras a seguir.

A partir do ECMAScript 2020, Object.keys, for...in, Object.getOwnPropertyNames e Reflect.ownKeys seguem a mesma ordem de especificação. Eles são:

1. Propriedades próprias são índices de array, em ordem crescente de índice numérico

Um índice de array é uma chave de propriedade com valor de String que é uma String numérica canônica. E uma String numérica canônica é uma representação em String de um número que seria produzido por ToString, ou a string "-0". Assim, por exemplo, "012" é não uma string numérica canônica, mas "12" é.

2. Outras propriedades String próprias, em ordem cronológica crescente de criação da propriedade

O código acima adiciona o ponto de conhecimento do loop de eventos. Como setTimeout é uma tarefa de macro assíncrona, a propriedade c não foi adicionada a obj quando console.log é gerado.

3. Propriedades próprias do símbolo, em ordem cronológica crescente de criação da propriedade

A propriedade Symbol é igual à propriedade String, em ordem cronológica crescente de criação da propriedade. Mas os métodos Object.keys, for...in, Object.getOwnPropertyNames não podem obter as propriedades Symbol do objeto, Reflect.ownKeys e Object.getOwnPropertySymbols podem.

Conclusão

Quando as chaves de propriedade de um objeto são uma combinação dos tipos acima, as chaves inteiras não negativas do objeto (enumeráveis ​​e não enumeráveis) são primeiro adicionadas ao array em ordem crescente e, em seguida, as chaves String são adicionadas em ordem de inserção. Finalmente, as chaves de símbolos são adicionadas na ordem de inserção.

Mas se você depende fortemente do pedido de inserção, o Map garante isso para você.

Se você achou isso útil, considere assinar meu boletim informativo para artigos e ferramentas mais úteis sobre desenvolvimento web. Obrigado por ler!