【Javascript】オブジェクトの要素の取り出しは順番通りとは限らない【初心者向け】

Javascript
スポンサーリンク

こんにちは、くれあです。

Javascriptでfor-in文を使っていたところ、

思っていた順番通りにfor-in文が実行されないことがあったので

メモとして原因と対処法を紹介します!

今回実行したサンプルコードはこちらです。

基本的なfor-in文の使い方

今回はfor-in文を使っていました。基本的なコードの書き方は以下です。

オブジェクトにあるプロパティを列挙するプログラムを書いてみました。

const jiro = { name : "jiro" , age : 28 };

for( const key in jiro ){
    console.log(key + ':' + jiro[key]);
}

出力結果

name:jiro
age:28

for-inは順序通りになる保証がない

for-inの弱点として必ずしも順序通りにならないという点があります。

例として以下のオブジェクトは入れた順序でfor文が実行されません。

const members = {
    jiro11tanaka: { name: 'jiro', age: 28 },
    yuko0yoshida: { name: 'yuko', age: 22 },
    hiyoko: { name: 'hiyoko', age: 18 },
    24568: { name: 'even', age: 28 },
    16729: { name: 'prime', age: 28 }
}

for( const key in members){
    console.log(key + ':' + members[key]);
}

出力結果

プロパティのキーが数値のものが含まれていると、

ループ処理は数値で昇順ソートされたものから実行されます。

16729
{ name: 'prime', age: 28 }
24568
{ name: 'even', age: 28 }
jiro11tanaka
{ name: 'jiro', age: 28 }
yuko0yoshida
{ name: 'yuko', age: 22 }
hiyoko
{ name: 'hiyoko', age: 18 }

※ブラウザによっては順番通りに表示されるかもしれません。

対策:Mapオブジェクトを使う

連想配列で順番を保ちたい場合は Mapオブジェクトを使うといいです。

let members = new Map([
  ['jiro11tanaka', ['name', 'jiro']],
  ['yuko0yoshida', ['name', 'yuko']],
  ['hiyoko', ['name', 'hiyoko']],
  ['24568', ['name', 'even']],
  ['16729', ['name', 'prime']],
]);
 
for (let [key, value] of members) {
    console.log(key + ":" + value);
}

出力結果

jiro11tanaka:name,jiro
yuko0yoshida:name,yuko
hiyoko:name,hiyoko
24568:name,even
16729:name,prime

forEachでも処理することが可能です。

members.forEach((value,key)=>{console.log(key + ":" + value);})

まとめ:オブジェクトでfor文で扱う際は注意

オブジェクトをfor文で扱う時、

順序通りかどうかは注意しないことも多いのでなかなかエラーに気付けず苦労しました。

逆に順番通りになることも多いかもしれませんが、

オブジェクトでfor文を使うのは賢明ではないかもしれません。

Mapオブジェクトも最近知ったばかりなので、理解を深めていきたいところです…!

コメント

タイトルとURLをコピーしました