10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

はじめに

「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

10
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?