Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ES6 以降は JavaScript のプロパティに順序は「ある」

More than 1 year has passed since last update.

はじめに

「JavaScript のプロパティは順序が保証されていない」 とか 「実装依存だ」 というのが、時々語られることがあるけれど、古い仕様の話である。

ES2015 (ES6) 以降はそうでもないよと言うお話。

仕様

プロパティキーの順序に関する部分は ここ

  • 文字列キーの内、0 以上の整数に解釈可能なキーが整数昇順で並ぶ
  • それ以外の文字列キーが作成順で並ぶ
  • シンボルキーが作成順で並ぶ

「作成順」は、オブジェクトリテラルの場合、単に上から。

const o = {
  a: 1,
  b: 2,
  c: 3
};
console.log(Object.keys(o)); // ES6 以降なら必ず a, b, c

各種メソッド

  • getOwnPropertyNames (仕様)
    • 文字列キーのみ
    • プロトタイプは辿らない
  • getOwnPropertySymbols (仕様)
    • シンボルキーのみ
    • プロトタイプは辿らない
  • Object.keys (仕様)
    • 文字列キー, 列挙可能なもののみ
    • プロトタイプは辿らない
  • for in (仕様)
    • 文字列キー, 列挙可能なもののみ
    • プロトタイプがあれば辿る (プロトタイプのキー群は後にくる)

おわりに

というわけで、環境を ES2015(ES6) 以降に限定できるのであれば、整数キーの扱いに注意はいるものの、プロパティ順序に依存したプログラムも問題なく書ける。

Internet Explorer 11 も ES6 対応は中途半端だけれど、順序に関しては準拠しているので、最新版のみ相手にするなら、主要なブラウザなら大体使えるねと思っても差し支えない。

ES5 な環境も元気で生きているので、そこまで含めた話なら、順序に期待できないねえというのはわかるのだけれど、ES6 の解説してるところまで順序が無い的なことが書いてあったりするので、色々と注意が要る。

仕様書読もう仕様書。

参考

ECMAScript® 2015 Language Specification
ECMAScript 6 compatibility table - kangax, own property order

nagtkk
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away