chromeを使ってjavascriptを使った開発をしていたら奇妙な現象に出くわしたので備忘録として残しておきます。
Javascriptを使って上の画像のようにパソコンのキーボードをhtml上にて表現しようとしました。
そこで以下のようなオブジェクトを作成してfor inで中身を表示するというよくあるパターンを採用しました。
{
49:['1','!'],
50:['2','"'],
51:['3','#'],
52:['4','$'],
53:['5','%'],
54:['6','&'],
55:['7',"'"],
56:['8','('],
57:['9',')'],
48:['0'],
189:['-','='],
222:['^','~'],
220:[' \\ ','|']
}
//以下省略
このオブジェクトをfor inを使って表示した結果が以下の画像です。
この画像の上の一列目を見ていただきたいのですが、なぜかオブジェクトが格納されている順番ではなく「添字であるキーがソートされた結果」が表示されてしまっています。
具体的には「０」の添字が48なので一番最初にきており、「￥」の添字も220なのでひとつ順番が入れ替わってしまっていますね。
なぜこんなことが起こってしまうのか調べてみたところ、chromeなどの一部ブラウザでこの現象は起こるそうですが、どうもバグなのか仕様なのかハッキリしないみたいです。
対策としては整数値をオブジェクトのキーに使わないようにしたり、オブジェクトのキーに「key48」のように文字列を接続して使用時に外すなどするしかないようです。
ちなみに整数値キーをダブルクオーテーションで囲ってもソートされてしまいます。
おそらくお試しになる方がいらっしゃると思うので予めご報告を。